[Elm-UI] font size increases when switching device orientation

Learn
1

Hi,

I’ve been wrangling with a strange issue today and hope someone can shed some light on this. I have a few paragraphs of text stacked in a column - what could possibly go wrong?

import Element as El
import Element.Font as Font

El.column
    [ El.width El.fill ]
    [ El.paragraph
        [ Font.size 14 ]
        [ El.text "Some text" ]
    , El.paragraph
        [ Font.size 13 ]
        [El.text "Some more text" ]
    , El.paragraph
        [ Font.size 14 ]
        [ El.text "And yet more" ]
    ]

This issue I’m having is a bit weird, I’ve checked the issues for Elm-UI but can’t find anything. When a user rotates their device from Portrait to Landscape, the two paragraphs whose font size is 14 increase in size, while the paragraph whose font size is 13 remains the correct size.

Rotate the device back to Portrait and the font sizes revert to their correct size.

It gets even weirder if more content is added to the column so that the page scrolls. If this is the case, when the device is rotated back to Portrait, the font sizes remain in their enlarged state. In some browsers, they revert to their correct size when the user subsequently scrolls the page.

The weird thing is that this only happens if two or more paragraphs have the same font size, if they are all different sizes, they remain at their correct size when the device is rotated from Portrait to Landscape and back again.

Unfortunately, I’ve not been able to replicate the behaviour in an Ellie, and the app url isn’t public so I can’t link to an example (although I’ll try and post an example somewhere tomorrow).

Has anyone come across this before?

2

I think it is probably the user agent of the browser inflating the text size on orientation change, check out text-size-adjust - CSS: Cascading Style Sheets | MDN

If you set that to 100% on the html/body tag I think it will solve it, make sure to add vendor prefixes for other browsers as well if you want to cover them!

html {
    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
}
3 Likes
3

Thanks, that’s exactly what I was looking for.

4

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.