Mobile - 'resize' Event Now Firing Prior to Page Layout
Steps to Reproduce:
Please open the following JSBin on iOS and rotate from portrait to landscape, then back to portrait:
Code is available here:
Note: The first link must be opened on iOS, not the latter. The problem is *not* reproducible in an iframe.
The words "Stretch me, please." should remain centred with the red background covering the entire viewport after rotation, both to and from portrait.
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.
iOS 10.3.1 (14E304)
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.
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.
'correct_layout.PNG' and 'broken_layout_post_rotation.PNG' were successfully uploaded.
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!