search

toomuchdesign / offside

Minimal JavaScript kit without library dependencies to push things off-canvas using just class manipulation.
http://toomuchdesign.github.io/offside/demos/typical/
MIT License
277 stars 23 forks source link

Offcanvas not fixed on Android #11

Open idiazroncero opened 5 years ago

idiazroncero commented 5 years ago

Hello;

Testing the demo pages on a Android 9, on Chrome, the behavior of the offcanvas seems broken to me.

I've tested both with and without 3d transforms: http://toomuchdesign.github.io/offside/demos/multiple-elements http://toomuchdesign.github.io/offside/demos/multiple-elements-no-css-3d-transforms

Basically, the "fixed" position is not respected, the offcanvas menu takes 100% of the height of the page (not viewport height, even if I force it) and it scrolls along the page instead of remaining in view.

Also, I'm able to free move the page.

See the following GIF of my android device, captured using Chrome Devtools. I delete the "height:100%" css in order to let you see how the element behaves as a static, not fixed element.

freemove

Feel free to contact me if you need more info about my devices / setup.

idiazroncero commented 5 years ago

This behavior is also happening on Firefox.

toomuchdesign commented 5 years ago

Hi @idiazroncero, thanks for raising the issue. I think the problem you described comes from offside assigning overflow-x: hidden to the body.

I'll try and think of a non-breaking solution but I can't tell how soon I'll be able to work on it.

In the meanwhile thought, ideas, solutions, PR are definitely welcome.

toomuchdesign commented 5 years ago

Note: might an overflow-x: hidden assigned to the root html element mitigate the issue?