Jump to content
GreenSock

meindert

ScrollTrigger pin has a small 'hidden' bug with the fixed width

Recommended Posts

Hello,

I noticed a small bug in ScrollTrigger, specifically about this: (quoted from https://greensock.com/docs/v3/Plugins/ScrollTrigger)

Quote

The pinned element gets immediately wrapped in a <div> with a fixed width/height to match. [...] so that when it flips to position: fixed things don't collapse.


The pinned elements gets a fixed width, which is usually correct.
BUT I noticed that on my 4K TV, when extending my screen (laptop -> hdmi -> tv), the page gets a horizontal scrollbar.
 

The reason why I am getting the horizontal scrollbar is because the browser width on my TV is 2324,57px (Google Chrome). ScrollTrigger uses '.offsetWidth' (?). OffsetWidth returns an integer, so instead of 2324,57px it returns 2325px, causing the horizontal overflow.
(I pinned a fullscreen element)

This is probably the case for everyone that would display their website on his/her television? I am no expert in these things.

I found two ways to solve this problem:
1. Add an extra element around the pinned element with overflow: hidden; ,hiding the .43px overflow (should this be build in ScrollTrigger when pinning?)
2. Instead of '.clientWidth' use 'getBoundingClientRect().width'. This property returns a float, which will return 2324,57px. (but I once read that this is not good for performance?)

Has anyone else noticed this problem?
How did you solve this?
What would be the best solution?

Thank you for your time!

Link to comment
Share on other sites

Huh. What an odd one.

We wouldn't want to be building overflow:hiddeninto scrollTrigger as people pin all sorts of things and sometimes those things might need overflow!

I also don't think getBoundingClientRect() would be a good substitution as it returns 0 on inline elements and also takes transforms into account. 

I would probably just fix this issue myself in CSS and write it off as a weird browser bug... but let's see what Jack says, he's the one to ask about the inner workings of GSAP!
 
I'll pass this over to @GreenSock

Link to comment
Share on other sites

Yep, I'm with @Cassie here - a simple CSS tweak is your best bet (like overflow-x: hidden on <body>). I very intentionally make the width round UP because if we don't do that, there are scenarios where text will actually reflow. So imagine you've got a display: inline-block <div> with text - even if we get the decimal value from getBoundingClientRect() (which, as Cassie pointed out, has its own liabilities) it still would often cause that very last word on the right edge to wrap when we set the width. Very ugly and annoying. 

 

Either that or get a new TV/Laptop that doesn't use a decimal for screen width ;)

  • Like 1
Link to comment
Share on other sites

I have never seen 'uses decimals for screen width' in the specs when buying a new device 😅
Anyways, adding overflow-x to the <body> solved the problem, thanks!

  • Haha 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×