working fixed background image in chrome mobile vs performance

[zantafio]

hello there,

i would like to have a fixed image as the backdrop to my site.
as i found out ( like so many others before me ) this does not work correctly on chrome on android:
http://codepen.io/anon/pen/xVgQBe

unless i use the overflow-x: hidden; on the body, html ( uncomment it in the codepen example )
but then the performance is much much worse …

any other ideas, on what i could try?

[Robby]

Yeah background attachment fixed is so laggy. Try it like this:

https://codepen.io/sitechop/pen/QNdXbE

So basically we move the background to its own div. With position: fixed, and z-index: -1;

[zantafio]

Thanks a Million!

One remaining problem though.
I’d like to offset the content-y to 100vh by adding:

<div class="content">
    <div class="scroller">

and then in style

.content{
    margin-top:100vh;
}

but that gives me a white background over the image

See:
http://codepen.io/anon/pen/dMNxPo

the other option would be tp have an empty div with height:100vh before the content like so:
http://codepen.io/anon/pen/XdpvJO

Is that hacky or ok?
Thanks again!

[Robby]

Do this on .content:

box-sizing: border-box;
padding-top: 100vh;

Another option would be to absolutely position .content:

position: absolute;
width: 100%;
top: 100%;
left: 0;

[zantafio]

Thanks another million! :D

Out of curiosity and since I am focussing on performance:
Is there any difference in terms of performance with one of these?

thanks!

[Author]

Posts