Background-size, fixed positioning and why won't Safari play nice?

[Sean]

I’m working on a parallax project, and ran into trouble when trying to combine background-image:cover and background-attachment: fixed. As I understand, setting an element to fixed positioning is essentially removing from the DOM and making it relative to the window. The picture stretched way too big.

In any case, it didn’t work — and then I found a great article (http://www.carsonshold.com/2013/02/css-background-sizecover-doesnt-like-fixed-positioning/) with a Javascript solution to make it all function properly.

Here’s the script:

<script>
jQuery(window).scroll(function() {
var scrolledY = jQuery(window).scrollTop();
jQuery('.hero-featured').css('background-position', 'center ' + ((scrolledY)) + 'px');
});
</script>
<code></code>

You can see the JSFiddle here: http://jsfiddle.net/QN9cH/1/

This works fine in Firefox and Chrome, but on Safari, it causes the background image to rapidly vibrate/shake on scroll. If you’re on Safari, you can see the problem in the fiddle.

Any suggestions on how this can be corrected? I’ve come across something related to Safari’s hardware acceleration, or about swapping “mousewheel” for scroll, but that’s about it.

Worst case: Can I disable the script in Safari? Thank you!

[shaneisme]

A quick correction: background-attachment: fixed is not the same as position: fixed.

background-attachment: fixed : This keyword means that the background is fixed with regard to the viewport. Even if an element has a scrolling mechanism, a ‘fixed’ background doesn’t move with the element.

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

position: fixed : Do not leave space for the element. Instead, position it at a specified position relative to the screen’s viewport and don’t move it when scrolled. When printing, position it at that fixed position on every page.

https://developer.mozilla.org/en-US/docs/Web/CSS/position

I’ve not personally had issues with background-size: cover + background-attachment: fixed, but I’ll have to double check on a Mac or iOS device to be sure.

[Author]

Posts