just ran into an issue where background:fixed on the element 'caused my background to disappear and then came across this interesting thread HERE , now this guys says the following:
Same problem here. I had a sticky header using position:fixed; that flickered in PC Chrome 34. I tried the solutions in this thread, position:static; in the parent broke other parts. But I know adding -webkit-transform: translate3d(0,0,0); basically makes Chrome turn that html into a layer so that it won't get repainted. That worked for me.
What does he mean by
But I know adding -webkit-transform: translate3d(0,0,0); basically makes Chrome turn that html into a layer so that it won't get repainted.
I also have second question , does background-attachment:fixed , when added to anything apart from the body , gets attached to the viewpoint ? rather than the element ? is that's what 'causing my background to disappear ?
Sorry for the no code , i am more interested in the theory part of it.
Don't forget to read the specs
See §3.5. Affixing Images: the ‘background-attachment’ property. The specification directly addresses your issues.
For transformations, the specs are not well defined yet. In my experience, these functions act much like relative position in that the content is 'raised' above the content box. I haven't given a lot of thought to transforms, though I played with it when Firefox v3.5 first supported it. I suggest you spend some time reading the §16. The Transform Functions specs. Keep in mind they are unsettled.
Side note: Fixing an element or background is expensive computationally. Flickering or stuttering is to be expected. Have mercy on your mobile visitors.
Thanks gary will go through them and will be back with some more questions
In the first article you
In the first article you linked , i see the below statement.
Even if the image is fixed, it is still only visible when it is in the background painting area of the element or otherwise unclipped.
now what does that mean ? does it mean ?
if i fix the background of an element , the background of the element will only be visible when the element is in viewpoint or view ?
Not sure I am using terms correctly
A fixed bg image is fixed to the viewport. If the element is not aligned over the image, it is not in view.
Consider a small drawing on the wall. Now cut a hole in a piece of paper or cardboard. The hole is the element you're interested in. Now lay the paper on the wall. Unless the hole is over the drawing, you can't see it. Move the paper up and down to simulate scrolling and note that the image goes in and out of sight.
And, that's a fixed bg and how it works.