Mobile - 'resize' Event Now Firing Prior to Page Layout

Originator:benjamin.dobell
Number:rdar://31725316 Date Originated:20-Apr-2017
Status:Open Resolved:
Product:Safari Product Version:10.3.1
Classification:Other Bug Reproducible:Always
 
Summary:
Up until recently Mobile Safari has correctly posted the resize event after the viewport was resized and after page layout. However, that’s no longer the case. Instead it’s posted before the page has been completely laid out. Any JavaScript relying on clientWidth, clientHeight, getBoundingClientRect etc. in an onresize callback is now broken.

Steps to Reproduce:
Please open the following JSBin on iOS and rotate from portrait to landscape, then back to portrait:

http://output.jsbin.com/rotedotari

Code is available here:

http://jsbin.com/rotedotari/edit?html,css,js

Note: The first link must be opened on iOS, not the latter. The problem is *not* reproducible in an iframe.

Expected Results:
The words "Stretch me, please." should remain centred with the red background covering the entire viewport after rotation, both to and from portrait.

Actual Results:
Upon rotating back to portrait (from landscape) that the webpage layout is messed up and that the portrait view has laid out as if still in landscape (#stretch-me, has not been stretched correctly). This is because the `resize` event has been fired off too early - the viewport has resized, but the page is yet to be laid out. The `resize` event needs to be fired after the page as been laid out.

If you have an Android phone handy (I know, I know), the correct behaviour can be observed in Chrome for Android.

Version:
iOS 10.3.1 (14E304)

Notes:
Apple's own webpage displays an image carousel, it works around resize event issues by setting a 500ms timeout, then performing layout. Presumably that 500ms is arbitrary, although on my own website I noticed 300ms was not sufficient (although I suppose it varies depending on page complexity).

If you visit the Apple homepage right now the experience when rotating whilst looking at the image carousel at the top of the page is less than stellar - this is due to the 500ms layout delay.

Configuration:
This is a recent breaking change. As a developer I'm often holding off on upgrading my iOS version. However, a client reported this problem and I could not reproduce it until upgrading to iOS 10.3.1. So I believe this was introduced in 10.3.1, or possibly 10.3.0.

Attachments:
'correct_layout.PNG' and 'broken_layout_post_rotation.PNG' were successfully uploaded.

Comments

Reproduction (iOS viewable) link expired. Please use the following for reproduction:

http://output.jsbin.com/migimey

By benjamin.dobell at April 20, 2017, 8:41 a.m. (reply...)

Please note: Reports posted here will not necessarily be seen by Apple. All problems should be submitted at bugreport.apple.com before they are posted here. Please only post information for Radars that you have filed yourself, and please do not include Apple confidential information in your posts. Thank you!