search

adopted-ember-addons / ember-burger-menu

An off-canvas sidebar component with a collection of animations and styles using CSS transitions
https://adopted-ember-addons.github.io/ember-burger-menu/
MIT License
279 stars 47 forks source link

3D Transforms Break scrollTop and position: fixed #86

Open josiahbryan opened 7 years ago

josiahbryan commented 7 years ago

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 commented 7 years ago

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

offirgolan commented 7 years ago

@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 commented 7 years ago

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" notifications@github.com 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 https://github.com/offirgolan/ember-burger-menu/issues/86#issuecomment-311422959, or mute the thread https://github.com/notifications/unsubscribe-auth/AEmSLN9NZ4Ook9zEXMtYy_seA2Sn1DzEks5sITcIgaJpZM4N9R73 .

offirgolan commented 7 years ago

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

RobIsHere commented 7 years ago

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.