Steps to reproduce
- Navigate to this URL: www.googledrive.com/host/0B4WMOk_UgUCqekJYSUlMZTRXQlE, which has a 640x640 green div containing the current value of window.innerWidth (that value may not appear until you resize the window for the first time).
- Shrink the window horizontally so that it is less than 640 pixels wide (ie the @-ms-viewport style starts to take affect). Note that window.innerWidth at this point is reported as 640 (as it should because of the @-ms-viewport style).
- Shrink the window vertically such that the green square is, say, half obscured (eg ~300 pixels).
- Scroll the window down somewhat (eg one mouse wheel step). Sometimes you can see a vertical scrollbar and sometimes you can’t, for what it’s worth, but regardless you can still scroll the window down.
- Enlarge the window horizontally to be wide enough to see the whole width of the green rectangle. There should be a vertical scrollbar visible at this point.
- Click the vertical scrollbar tab and drag it to the top of the scrollbar. DO NOT scroll using the mouse scroll wheel or the up/down arrows on the scrollbar. This just makes it easier to see the problem below – the problem happens regardless of the way you scroll here.
- Take note of the value of window.innerWidth.
- Scroll down a step using either the scroll wheel or the down arrow on the vertical scrollbar.
At this point, a horizontal scrollbar appears, and if you scroll up to the top of the page you can see that window.innerWidth is less than it was at step 7. The green rectangle at this point is larger than 640 pixels wide, ie we’ve zoomed in a bit. See attached graphic comparing the page before and after step 8 – all three of these unexpected results are visible there. Also, if you shrink the window horizontally such that window.innerWidth stops decreasing (ie the the @-ms-viewport style takes effect), window.innerWidth is less than it should be (eg 623 when it should never be smaller than ~634).
When the window is large enough to display the full width of the 640px-wide div, I do not expect a horizontal scrollbar to be present. I expect window.innerWidth to be equal to that width in CSS pixels. On a devicePixelRatio==1 display, I expect the width of the rectangle to be 640 pixels. I expect window.innerWidth to never be less than 640 minus the scrollbar width, ie ~634px.
Dev Channel specific:
Comments and activity
- Microsoft Edge Team
Changed Assigned To to “Christian F.”
Changed Assigned To from “Christian F.” to “Matt R.”
Changed Assigned To from “Matt R.” to “IE S.”
Changed Status to “Not reproducible”
Thank you for providing this information about the issue. After thorough testing, we are unable to reproduce this problem in Edge. Please test this behavior in our latest creator’s update 15063 or the insider build 16199.
The MS Edge Team