3

I need to re-position an image inside another div with overflow:hidden, to get some sort of "parallax Effect", but it's no option to use "position:fixed" here, because fixed positioned Elements don't care about "overflow:hidden" Parents... so i need to do this in JS (jQuery).

In Firefox everything looks fine, but on Webkit based Browsers and IE9 the Background-Image (the Dog) is flickering, look at this jsfiddle Example: http://jsfiddle.net/7J5AM/1/

Is there a way to get around this Problem? Spotify uses the same Effect: https://www.spotify.com/uk/ but they do this Effect using 2 Elements, the first is just a Placeholder for the Keyvisual-Image and the second one is a fixed positioned Element with the actual Image in it.

For my example this is not possible, because i need to use a CMS (Typo3) later, there, it's not possible to place each Keyvisual twice (Placeholder + Image) - well it is possible, but it's very uncomfortable for my Editors...

Is there a way to get around this flickering?

EDIT: Using the Image as background-image is also not possible, because i need to resize the images for responsive Design purposes...

Here's the important part of the Script:

var win_h = jQuery(window).height();
var scroll_top = jQuery(document).scrollTop();
var kv_pos = jQuery(this).parent().offset();

if(parseFloat(kv_pos.top) < (win_h + scroll_top)) {
    var new_top = (((scroll_top - kv_pos.top + 90) / 100) * 60);
    jQuery(this).css('top',new_top);
}
4
  • I don't actually see the flickering in Chrome v26 on MAC. One thing you could consider trying is setting up your own scrolling event listener in vanilla js. I know jQuery animations can be a bit lagging. Lastly your code could be greatly optimized. You repeatedly run jQuery selectors against the document. This will slow down your process. (This is a comment because I don't really have any answers. sorry) Apr 30, 2013 at 13:59
  • No Problem, thanks for your answer Joseph! It's less flickering on Chrome, but on Mac Chrome (with Magic Mouse) and Windows IE9 it flickers a lot! What do you mean by "You repeatedly run jQuery selectors against the document." ?
    – Patrick
    Apr 30, 2013 at 14:03
  • Every time the scroll event fires, you call repos_keyvisual_headline(); and repos_keyvisual(); which in turn run jQuery('.selector').each() every single time. jQuery has to then search the entire document for these elements every scroll cycle. If you cached the jQuery elements rather than refetching them every time, it would theoretically run faster. You could also narrow the jQuery selector with jQuery('.selector', someElement) rather than searching the whole document. EDIT: I tried it and it doesn't seem to help: jsfiddle.net/BSxCB Apr 30, 2013 at 14:36
  • Ah, know i know what you mean, yes you're right, but that's not really a problem :-) I use this method in all my scripts.. that way you do have some advantages and the performance loss is marginally...
    – Patrick
    Apr 30, 2013 at 15:48

1 Answer 1

3

It seems that there's no way to do this with position:absolute. The Problem is, the Engine of Webkit and IE set the new Viewport Position of a position:absolute Element while scrolling. After calculating and setting the new position my jQuery(window).scroll jumps in and set a new/other position for the position:absolute Element. So if you scroll per Pixel (Magic Mouse on Mac for example) then everytime before jQuery does its magic, the Browser Engine set a new position itself - this causes the flickering!

Only if you set the Elements to position:fixed the browser wont touch their positions...

So my way to get arround this is: After document.ready i set my Keyvisuals to visibility:hidden and copy the Content right after the body-tag. Then, all these copys are position:fixed and all what i do now is to set the height and top values to the one according to their "hidden placeholders" - Just like Spotify.

1
  • Sorry, it's complicated to extract this Js from the whole project/site, but you can view the Spotify-Site, with Firebug enabled it's pretty simple to see how this technique works!
    – Patrick
    Nov 5, 2013 at 12:11

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.