Bug 151384 – window.innerWidth seems to return something other than the viewport width

• Status: NEW
• Component: New Bugs

[Tobi Reif]

Please load this page

http://tobireif.com/non_site_stuff/copy_of_tobireif_com_startpage_for_webkit_bugreport_innerWidth/

in the iPhone 4s (iOS 9.1) simulator. The "stamp" (circle) should be centered.

Change the function getViewportWidth to always return window.innerWidth, then view the page in the iPhone simulator. The contact stamp is off-center (but in eg Firefox with the ~same window size it's centered as intended).

I'd like to be able to use the simple version of the function for all browsers & OSs & devices.

[Tobi Reif]

When I load the page in the Android stock browser (uses WebKit?), then rotate, then rotate again/back, the stamp is off-center.

[Simon Fraser (smfr)]

innerWidth is indeed changing as the page loads, and doesn't stabilize until after the load event fires.

[Simon Fraser (smfr)]

innerWidth is indeed changing as the page loads, and doesn't stabilize until after the load event fires.

[Tobi Reif]

I'll try running the adjust-layout func on load.

(Related:
https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
"load": "Deprecated, use pageshow instead."
So "pageshow" is to be used instead it seems.)

[Tobi Reif]

In an old Dolphin (uses WebKit it seems) on Samsung Galaxy S3 the width still isn't correct.

I had to force a redraw using a hack:

body.style.display = "none";
setTimeout(actuallyAdjustLayout, 0);

function actuallyAdjustLayout() {
  body.style.display = "block";
  // ...
}