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 :hot_face:) So today I tested a current project in different browsers on iOS, and some are reporting the wrong window size when rotati…

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…

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 =…

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?

No it’s not related to elm-ui. I’m using Browser.Events.onResize 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.

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.getEl…

[image] mattpiz: 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? Both, but only on 3 out of 5 browsers, Safari and Brave worked as expected. I’ll look into your alternat…

There’s also an orientationchange event that may or may not be relevant. [image] Detect Orientation Change Detect orientation change on mobile devices using orientationchange, media queries, matchmedia, resize events. Orientation may be portrait or landscape mode. …

This might be linked to how the different browsers handle safe area - are you using one of iPhone with a notched form factor?

@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 :+1: @Nduati_Kuria No it’s not notched - it’s an old antique iPhone 7 :rofl: that I see no need to upgrade from. Thanks for the s…

Incorrect onResize window dimensions in some browsers on iOS

Learn

lydell April 10, 2021, 11:53am 8

There’s also an orientationchange event that may or may not be relevant.

1 Like

Topic		Replies	Views
[Elm-UI] font size increases when switching device orientation Learn	3	945	November 1, 2021
How to get the window size with Browser.Dom? Learn	11	4485	November 10, 2018
Is this an Accessibility thing? Copilot says yes, but is it? Learn	14	377	September 16, 2025
Mobile-first Elm responsive design in 2019 Learn	4	4403	December 17, 2018
Resizable element events Learn	5	2094	July 26, 2019

Incorrect onResize window dimensions in some browsers on iOS

Related topics