Flicker/Bounce when Chrome zoomed in/out

[ghost]

When we create a sticky element that is larger than the browser viewport size and in Chrome the screen is either zoomed in or out (ie: view the page at 90% or 110% etc) any sticky elements flicker and bounce when scrolling down - this does not happen when the screen is set to 100%. We've also seen this occur on a high-resolution screen on a Microsoft Surface Pro, where Windows 10 is set to magnify everything in the display settings.

You can see this behaviour here: https://youtu.be/dGgC_ekp6_Y

It appears that the element is bouncing back and forth between position:fixed and position:absolute as you scroll down. You can see this here: https://youtu.be/DIoansfdSe8

We've seen this behaviour in Chrome on Mac/Linux and Windows. The version of Chrome in the videos is 67.0.3396.99.

Please let me know if there are any more details I can provide.

[somewebmedia]

Hi @ebouwsemacx, I was on a vacation so sorry for not replying right away. I'll check into this and get back to you.

[janvonmulert]

I can confirm the same issue using hc-sticky 2.2.1 and chrome 68.0.3440.106 on mac. Except Im still getting the flickering on scroll when zoom is set to 100%

[justanotherco]

I can confirm this is happening here too on Windows and Chrome :(

[justanotherco]

Actually can also confirm it on Chrome on Mac, if I zoom into 110% it fights between absolute/fixed constantly and looks very broken. Even though this may not be super common, I've seen a lot of people have their browser zoomed in or accidentally activate it too, so it would be amazing if there was a solution to help.

[somewebmedia]

This bug is caused due to Chrome's subpixel precision, which returns decimal points for values making them not match up. I'll have to play around with this.

[somewebmedia]

@ebouwsemacx @pharitz @justanotherco Can you all check if the bug is still present in the new v2.2.3 version?

[janvonmulert]

@somewebmedia Thats fixed it, thank you!

[justanotherco]

Yep perfect now, thanks!