meindert Posted May 17, 2021 Share Posted May 17, 2021 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 More sharing options...
Cassie Posted May 17, 2021 Share Posted May 17, 2021 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 More sharing options...
GreenSock Posted May 19, 2021 Share Posted May 19, 2021 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 1 Link to comment Share on other sites More sharing options...
meindert Posted May 19, 2021 Author Share Posted May 19, 2021 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now