# Learning React - Sliding Menu (Chrome issue)

**URL:** <https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232>\
**Category:** web dev\
**Created:** [January 7, 2019, 4:55pm UTC](https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232 "2019-01-07T16:55:50Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![jamesallan626](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jamesallan626/32/9416_2.png) [@jamesallan626](https://forum.kirupa.com/u/jamesallan626)\
**Post date:** [January 7, 2019, 4:55pm UTC](https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232/1 "2019-01-07T16:55:50Z")

</div>

I just coded the FlyOut/Sliding menu from “Learning React” which you can see here: [https://jamesallan626.gitlab.io/slidingmenu/](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!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 7, 2019, 7:17pm UTC](https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232/2 "2019-01-07T19:17:10Z")

</div>

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 🙂

---

<div class="post-metadata">

**Author:** ![jamesallan626](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/jamesallan626/32/9416_2.png) [@jamesallan626](https://forum.kirupa.com/u/jamesallan626)\
**Post date:** [January 7, 2019, 8:00pm UTC](https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232/3 "2019-01-07T20:00:24Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 7, 2019, 8:03pm UTC](https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232/4 "2019-01-07T20:03:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![JohnHansenArtist](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/johnhansenartist/32/8958_2.png) [@JohnHansenArtist](https://forum.kirupa.com/u/JohnHansenArtist)\
**Post date:** [January 9, 2019, 10:29pm UTC](https://forum.kirupa.com/t/learning-react-sliding-menu-chrome-issue/639232/5 "2019-01-09T22:29:28Z")

</div>

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.