I’m not sure if this is a bug in elm-ui or certain browsers on iOS, but as elm-ui is so popular, I was if others may have encountered this… (unless I’m the only one )
So today I tested a current project in different browsers on iOS, and some are reporting the wrong window size when rotating from landscape to portrait - if I load the app initially in portrait mode it displays fine, and then rotating from portrait to landscape is also fine, but the browsers that fail all fail to detect the correct portrait size when rotating from landscape to portrait, and simply return the previous landscape size - which completely breaks the repsonisve design.
The device is an iPhone 7, and the browser versions are the latest available from the app store.
The browsers that fail are: Firefox, Chrome & Edge
The browsers that are OK are: Safari & Brave
Could this be elm-ui causing those browsers to report back the wrong size? I’ve checked the issues but can’t see that it has been reported if it is an issue with elm-ui. I’m using v1.1.7
I’ve just tested with an empty view, and when rotating from landscape to portrait the aforementioned failing browsers still report the wrong dimensions.
The failing browsers:
Chrome reports that the view size is window.innerWidth = 375, window.innerHeight = 319
Firefox reports window.innerWidth = 375, window.innerHeight = 321
Edge reports window.innerWidth = 375, window.innerHeight = 281
Strange that they all report back the correct width, but different heights. So this appears not to be an Elm question, but if anyone has any insights, I’d be grateful for some of your knowledge.
I guess a work around could be to compare the ratio of width to height to determine orientation seeing as the landscape numbers reported by onResize seem to be correct for all browsers, or simply track each change, so that once an orientation has been confirmed a resize event is simply a toggle from one orientation to another.
I’m not sure why that would be related to elm-ui. Window dimensions are independent from your layout library. What are you using to detect window size changes?
Edit: For the tests without a view I’m using window.onresize = () => alert(window.innerWidth + " x " + window.innerHeight) to get a read of the dimensions from JS.
I’ve found a fix. When Browser.Events.onResize fires I then use Browser.Dom.getElement to get the dimensions of the root node in the Dom which has it’s height and width set to fill. This produces the correct result for all browsers on iOS that I’ve tested.
Would still be interested to know why some browsers returned the wrong height though if anyone has any thoughts.
Just to be sure I understand correctly your issue. Both the JS code window.onresize and the elm Browser.Events.onResize events were behaving wrongly, or just the elm one?
If your fix of using Browser.Dom.getElement works, I suppose you could also replace Browser.Events.onResize + Browser.Dom.getElement by a port subscription that would be triggered by the JS window.onresize event in which you wait for the next animationframe before triggering the port.
@lydell Thank you, that’s something I’ll take a look at this evening. My current fix seems to have solved my problem, but I’m always interested in learning something new
@Nduati_Kuria No it’s not notched - it’s an old antique iPhone 7 that I see no need to upgrade from. Thanks for the suggestion though
)
that I see no need to upgrade from. Thanks for the suggestion though