3D Transforms Break scrollTop and position: fixed

[josiahbryan]

I stumbled across a really weird problem - when using e-b-m, I can't get scrollTop for my app - it always returns 0!!

I don't know how that's related to e-b-m, but I do know that when I tried to remove the "height:100%" I was using on my html/body elements, I could get scrollTop - but then my navbar ("position: fixed" - bootstrap) was suddenly not "fixed!"

(NOTE: I tried EVERYTHING to get scrollTop - document, html, body, even a container - nothing worked. NOTHING. All returned 0.)

This SO [https://stackoverflow.com/questions/14732403/position-fixed-not-working-for-header] indicates that 3D transforms were the problem. So, I implemented a custom animation for e-b-m that returned nothing for everything. The visuals indicated it worked - no transforms happened, but still, position: fixed was broken. I also tried resetting "transform: initial !important" on every element in the chain from the navbar up to html, but that didn't work either.

So, bottom line, the only way to get scrollTop and position: fixed BOTH working - remove e-b-m from my project. Which breaks my heart, because I love e-b-m!! Any ideas, anyone? How to "have it all"? position: fixed and a working $(window).scrollTop() value?

[offirgolan]

@josiahbryan let me investigate this. I believe I'm running into the same issue on one of my projects as well.

[offirgolan]

@josiahbryan I actually have not been able to reproduce this in my app. I have postion: fixed working as intending within a burger menu outlet. Any chance you can reproduce this in a twiddle or a dummy app so I can play around with it?

[josiahbryan]

I really appreciate you looking into this! Unfortunately, my production needs have dictated that I move forward with the application regardless, so I moved to a different menu solution. I will gladly attempt to reproduce this when we wrap up development on the current app, but I won't be able to take time to set up a reproduction anytime soon. So sorry for the trouble! I really appreciate you looking into this so quickly!

…

On Jun 27, 2017 12:08 PM, "Offir Golan" ***@***.***> wrote: @josiahbryan <https://github.com/josiahbryan> I actually have not been able to reproduce this in my app. I have postion: fixed working as intending within a burger menu outlet. Any chance you can reproduce this in a twiddle or a dummy app so I can play around with it? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#86 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AEmSLN9NZ4Ook9zEXMtYy_seA2Sn1DzEks5sITcIgaJpZM4N9R73> .

[offirgolan]

No worries at all, I totally understand. I'll keep this issue open 😄

[RobIsHere]

Adding a container to the top level of my app is also the reason why I can't use this. It looks really well enginered.

The Transforms and also "will-change" in css initiate a "new coordiate system" in chrome that will we used by position fixed elements.

You can read a lot about this chrome bug, the issue is near to its 10th anniversary :(

I've experience with that because liquid fire also suffers badly from the same issue. It's breaking not only position fixed but also the fullscreen mode of videos.

So If the Outlet Size equals the total browser size (new coordinate system equals old one), there should be no problem. Otherwise there is one for sure.