UserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 OPR/52.0.2871.64

Steps to reproduce the problem:
0. See all steps in the video: https://youtu.be/IkdEeUDKWY0
1. Open https://testpolygon.github.io/scroll/
2. Open mobile view with DevTools
3. Reload page
4. Scroll page to the right
5. Look at right part of the page. You see html tag background color.
6. Close DevTools
7. Look at scrollbar. Look at left part of the page.

What is the expected behavior?
DevTools mobile view should work like a real device.

What went wrong?
The body tag has been moved to the left, beyond the left border of the screen. In the mobile view, after reloading the page, the html tag width becomes more than 100%.

Did this work before? N/A 

Chrome version: 65.0.3325.181  Channel: stable
OS Version: 10.0
Flash Version: Shockwave Flash 29.0 r0

You can see the problem in the video on Youtube: https://youtu.be/IkdEeUDKWY0

I use html { width: 100vw; overflow-x: hidden; } to locate a content regardless of the existence of the scrollbar.
And I use -webkit CSS tags to make a custom scrollbar. ::-webkit-scrollbar { width: 12px; } ::-webkit-scrollbar-thumb { background-color: #bbb; }
I have set background of body tag to blue color.

You can see that after manipulations, the text is behind the left border of the screen (That says that the body tag has been moved to the left. It's problem.), and under the scrollbar is the html background (That says that the html tag has not moved.).

And in the mobile view, after reloading the page, the html tag width becomes more than 100%. On a real mobile device, there is no such problem.

Source code of HTML: https://gist.github.com/TestPolygon/225e65883ad06bd78b0fa0337c2f10ea