Learning React - Sliding Menu (Chrome issue)

programming web dev
1

I just coded the FlyOut/Sliding menu from “Learning React” which you can see here: https://jamesallan626.gitlab.io/slidingmenu/ . . Works fine, but I noticed if you reduce the width of the page to smartphone width or some small width and then rapidly widen the page width in Chrome back to full screen width, a bit of the ‘off screen’ menu shows up and then disappears. Just wondering if any experts know what might be causing this and suggest a quick fix for me. Thank you!

2

That seems like a bug in Chrome! The easy fix is to replace the -100vw with -110vw:

#flyoutMenu.hide {
    transform: translate3d(-110vw, 0, 0);
}

That moves the hidden menu even further out to the left, and it will avoid you seeing it when you resize :slight_smile:

3

I was still able to reproduce the problem (on Safari too) using extremely fast and violent horizontal viewport resizing using my mouse at -110vw so I changed it to -300vw and this seems to have resolved the problem. But I will need to monitor this issue daily for a while to see if the issue re-occurs! Thank you!

4

I’ll try to spend some time today and find a proper solution :stuck_out_tongue:

5

It’s true that simple is often the best approach, and because of that a slideout menu is very possible with just simple CSS. With added JavaScript, and even easier we have React here to work with, so by attaching a toggle and also possibly an eventListener to your onClick icon you can bring the menu component in and out of the DOM. This way the small glitch in browsers should not give that little preview oddity when resizing the screen/browser width.

1 Like