Jumping pinned element

[gornypiotr]

Hi
firstly I'd like to thank you for a great job with this library! I've tried a few other libraries and found yours the easiest and most intuitive to use. I'm building a website, where I've got a chemical apparatus in SVG with simple animation - just revealing and hiding particular elements, while scrolling.
I've pinned my SVG and I do the animation on the scroll, having the SVG in the middle of a page. Unfortunately what I observe is that in Chrome, IE11 and Opera it works great, but in Firefox the pinned element jumps while scrolling - it moves up and down by a few pixels. It's very likely I do something wrong, but I would appreciate if you could point me to my mistake. Or maybe there's something with the library...
Please have a look at this page: http://magdalenakrzys.pl/beta/ if you don't mind helping me. Please bear in mind that the page is still being developed, so there might be some flaws :-)
Thank you in advance.

[janpaepke]

Hi pgorny,

when I look at the script the top position of the pinned element does indeed fluctuate.
I am guessing this might be a performance issue of firefox.
I also have the suspicion the calculation of the spacer position (which is used to get the pinned elements original position) is wrong in firefox.
Please use the un-minified source of ScrollMagic and change Line 1743 to this:

if (obj.getBoundingClientRect !== undefined && 1==2) {

Now try again.
Let me know if that changes anything.

regards,
J

[gornypiotr]

Hi,
thanks for a quick answer. It does fix it. I've also noticed, that I was still on ScrollMagic v. 1.0.0. I've updated it (the jumping effect was still there) and afterwards applied your change. I understand this is temporary (right? :-)). What shall I do? Leave it for now?
Again: great job! Thanks!

[janpaepke]

Hi,
yes, please leave it for now.
This means there are some calculation or performance issues in firefox regarding "getBoundingClientRect" which I use due to its performance benefits in comparision to jQuery's "offset".
I'll have to look into what exactly causes the problem and then come up with a fix.

regards,
J

[janpaepke]

Hi Piotr,

so from what I have researched the reason for this issue is a different handling of SVG to regular elements in firefox when using getBoundingClientRect.
See here: http://phrogz.net/getboundingclientrect-is-lame-for-svg

This is really weird and I think this is what causes the position calculation to be off in firefox.

Is it possible for you to supply a stripped down version of your page so I can try to debug it?
It would be perfect if there is nothing else in there, but a scene that is pinned and demonstrates the jumping behaviour.

regards,
J

[janpaepke]

If anyone else is experiencing this bug and wants to help me debug it, please contact me.

[anthonygreco]

Hi @pgorny,

I've done a good bit SVG with ScrollMagic recently and willing to take a look at this bug. The url in your original post is now dead so I'm not 100% certain of the issue itself. Did you ever get a stripped down version to help debug this issue? Anything you could recommend me trying to recreate it?

[gornypiotr]

Oh hi Anthony
I'm sorry for not coming back to you guys. I've started to create a stripped down page, but I've found that the bug occurs only on my page in its full shape. That probably means the the actual configuration of all my DIVs around this SVG contributes to the problem - it's still probably related to calculating the bounding box, since the temporary fix @janpaepke suggested works.

I'm very busy this week, but have planned to create an example page during next weekend (15th-16th).
If you want to have a look earlier at the full page, it's been moved to its final location: http://www.magdalenakrzys.pl. Please let me know until Friday evening if you still need me to prepare the stripped down version for you.
Thank you

[janpaepke]

Hi Piotr,

A stripped down version would be great to debug this! :)
If you could provide one it will be appreciated.

regards,
J

[vitaliyb]

Hi. I have met same issue with jumping pinned elements in Safari Browser(Version 7.0.2 (9537.74.9) ) Mac OSX 10.9.2
In Chrome everything works great.
Fix that you have provided doesn't fix the problem.

Video - http://screencast.com/t/tBrhonQYmeU (Unfortunately, video doesn't show the glitch)
Live demo - https://dl.dropboxusercontent.com/u/1312012/2014/scrollmagic-pin-bug/index.html
Demo sources - https://dl.dropboxusercontent.com/u/1312012/2014/scrollmagic-pin-bug.zip

Thank you.

[janpaepke]

Hi Vitali,

thank you for your detailed investigation.
This is actually not the "jumping" bug described above though.

What you are describing is a small delay in safari before the pinned element is actually pinned, whereas in chrome it works fluently.
This is more apparent the faster you scroll.

I'm afraid this is not really a ScrollMagic bug, but has to do with how the browsers redraw the content. Fixing and unfixing elements is something that wasn't really foreseen by the creators of the browsers. While Chrome and Firefox seem to handle it well though, in Safari it takes some milliseconds to render the changes.
This is what results in the "jumping" experience.

So I'm sorry to say that the only way you can go about it, is to write an outraged mail to Apple saying "I though safari was so great... now look at this and fix it!".

No but really: There's not much you can do. :-/

regards,
J

[harshes53]

I am facing this issue on Chrome with ScrollMagic v2.0.5

It is actually weird, that the issue is only on two of four pinned element.

[janpaepke]

@hatchbee please post as a separate issue, with example

[ericbiewener]

@hatchbee -- are the elements that are experiencing the jumping inside a container with top padding? I just experienced this with something like:

<main>
  <h2>Pin this!</h2>
</main>
</pre>

And <main> had padding-top: 15vh. By removing that padding from <main> and adding it to <h2>, the problem was solved. Perhaps you are experiencing something similar.

[harshes53]

@MaxEdison I couldn't remember what was the actual issue was, but I did re-worked on the pinning thing and the issue was resolved. Not sure why it was flickering and jumping the element when the pinning starts.

[smWtf]

Not sure if problem I experienced has the same roots as the one reported in OP, but in my case pinned element still jumps sometimes if I move out of the scene and then scroll back in.

It happens because currently padding properties of pin spacer are not being recalculated when element is getting unpinned. This is easily noticeable if we move out of the scene by changing scroll position in big steps and then move back in smoothly scrolling container this time.

When we jump past the start/end point of the scene, element is getting unpinned correctly, but its container stucks with offset from the last time scene was updated while it was active. Once we start moving back and enter the scene again, Scrollmagic recalulates styles for pined element and one of the paddings getting changed to 0, resulting in element make a significant jump to the position where it's supposed to be.

This is the guilty part

if (_state === SCENE_STATE_AFTER && parseFloat(_util.css(_pinOptions.spacer, "padding-top")) === 0) {
    change = true; // if in after state but havent updated spacer yet (jumped past pin)
} else if (_state === SCENE_STATE_BEFORE && parseFloat(_util.css(_pinOptions.spacer, "padding-bottom")) === 0) { // before
    change = true; // jumped past fixed state upward direction
}

We also need to make sure here that padding-bottom was set to 0 if we jumped past the end of the scene and padding-top was set to 0 if jumped past the start of it. But considering that whole condition is only being executed once per entering/leaving scene (at least it was so in my case) whole thing may be redundant and can be replaced with change = true;

Here's a pull request with a fix. #443

[sanvision]

I am facing issue in chrome on mac while scrolling. If the cursor position is on top of the screen the scrolling stops working. Can someone help me fixing the issue? Thanks in advance. url of my website - http://jproductions.in/

[MatSchaeff]

@smWtf I'm facing the same issue in chrome on mac : "pinned element still jumps sometimes if I move out of the scene and then scroll back in."
Except that I dont use pin but tween (for parallax scrolling). You seem to have a good understanding of the code, do you know how i could apply your fix to tween ?

[lukedohner]

I have found a hacky solution. I'm animating a large background svg with svg objects on top of the BG. Everything is animated with a gsap timeline.

If I have a time in the timeline without movement then start a movement most everything jumps.
In other words if nothing on the timeline is moving because of a time gap a jump happens on the movement restart.

My solution was to have a little object animate throughout the entire timeline.
My timeline has a duration of about 90 sec. The tween below continues even longer that the actual relevant animation.

tl_mine.to(keepmoving, 110, {css: {x: 2}}, '0');

worked for me.