CODEWITHSUNDEEP
htmlfirefoxcsswebkit
user1639050
user1639050

Reputation: 11

Webkit vs. Firefox background-position and background-attachment

Having a bit of an issue with the way Webkit renders background-positions vs. the way Firefox does it. I'm working on a custom animation that is basically a large background image with a 3D carousel that selects the main image + background image. The animation then slides the carousel around and pulls the background around with it (see URL below).

The problem is that the page renders how I'd like it to in Firefox but not in Chrome/Safari. They're handling the background-position/background-attachment differently in this particular layout. I'm not sure what Chrome is centering around, but it seems to be something in the lower right quadrant.

Here is a stripped down example of what we're going for so it makes more sense. Works great in FF but the centering of the interior window's background is way off in webkit: http://ps12.pointsourcellc.com/webkitTest/test/test.html

We are using fixed backgrounds with center/top positioning and contain fill for both the true background and the one inside of the center div, i.e.:

#aboutView .cardFront {
background-image: url('../images/bay_bridge5570.jpg'); 
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center top;
background-size: contain;
}

Thanks in advance for any advice here. I'm pretty stumped on what's causing this issue and haven't had any luck searching around on it.

Update: Coworker and I found somewhat of a "fix", but we're still not happy with it and aren't sure why the image positioning is off in the first place:

I'm not sure why it's 75 px off or why the backface vis affects it, but this gives us something that lines up. Unfortunately adding this extra translation causes excessive flicker, so we're still working toward a better solution.

Upvotes: 1

Views: 1103

Answers (1)

Brian
Brian

Reputation: 2829

If you remove background-attachment: fixed, they both appear to behave the same. I don't think it's needed since you are already applying the background-size to contain anyway.

Upvotes: 1

Related Questions