- This topic is empty.
October 29, 2014 at 10:42 am #187296SeanParticipant
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.
Here’s the script:
var scrolledY = jQuery(window).scrollTop();
jQuery('.hero-featured').css('background-position', 'center ' + ((scrolledY)) + 'px');
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!October 30, 2014 at 9:58 am #187354shaneismeParticipant
A quick correction:
background-attachment: fixedis not the same as
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.
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.
I’ve not personally had issues with
background-attachment: fixed, but I’ll have to double check on a Mac or iOS device to be sure.