4 replies [Last post]
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 8 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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.

Thank you.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 20 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

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.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 8 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks gary

Thanks gary Smile will go through them and will be back with some more questions Tongue

gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 3 years 8 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

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 ?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 6 hours 20 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9743
Points: 3822

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.

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.