Font Sizing does not work on iPhone

[bluefirepatrick]

When I open a reflow book on my iPhone the font size settings do not make the font size larger. The line spacing changes but not the size of the font.

I can see this on all tested books including Moby Dick on
playground.readium.org

Safari on iOS 18.3.2

Steps to reproduce:
Open the book
Navigate to a chapter
Open Settings
Increase the font size

[JayPanoz]

Hmmm this one is mind-boggling to me ATM because I can see different results depending on different books and even different DOM elements.

We had to add --webkit-text-size-adjust: none in ReadiumCSS to actually fix this same exact problem on iPadOS – due to the desktop-class experience kicking. As soon as you remove this style for iOS (iPhone) I can see it working fine through BrowserStack but now iPadOS seems to be broken in all cases.

I thought maybe it could be because the zoom is applied to body and the text-size-adjust to root but that makes no difference. And the breakage I’m experiencing is so visible there is no way I wouldn’t have noticed that before when testing – I mean even when it works for body, it doesn’t for headings for instance, so this is very noticeable.

Update: SO explanation of the intervention.

[JayPanoz]

So first removing the property makes it work for iPhone and iPad + Mobile version of the website as expected.

This adjusting property now seems completely broken on iPadOS + desktop, with zoom being applied to pseudo-elements e.g. first-line in small caps but not the rest of the paragraph (Moby Dick), or body but not headings (The house of the seven Gables).

Tried isolating what could possibly trigger these inconsistencies but 4 hours of digging into stylesheets later, no luck. I’m afraid I don’t have any simple fix here. iPadOS + desktop is an unresolved issue at the moment.

[JayPanoz]

We are witnessing weird inconsistencies across books on Firefox as well. So I’ll take a deeper look at the recent commit history of ReadiumCSS as I don’t understand how things degraded so much since first implementing this setting.

[JayPanoz]

@bluefirepatrick This should be fixed for iPhone here: https://blob-update.playground-7xz.pages.dev

This means it is also broken on iPadOS (unless requiring the mobile website). And has issues on Firefox too. I’ve opened an issue in Readium-CSS to keep track of debugging but I cannot foresee a simple resolution in the short-term, I’m leaning towards exposing the deprecated implementation of font-size (from ReadiumCSS 1) next to the new one, and switching to it when necessary – by default for Firefox, when iPadOS is requiring to desktop version of the website.

Some issues seems to be so fundamentally impacting the implementation of zooming and/or the property to disable interventions on iPadOS that I’ll have to file bug reports with reproducible demoes so that they get fixed.

[bluefirepatrick]

Thanks for looking into this. I know this is a complicated process and somewhat of a black art as well. It's worth pointing out how impressed I am of the quality of the layout in general. It's pretty miraculous to have such a sophisticated layout at this point in the project.

[JayPanoz]

Thanks!

Firefox should be fixed in the deploy mentioned above, which should quickly be merged into develop as we need to migrate to Thorium Web.

Don’t have any ETA for iPadOS + desktop website. It’s so utterly broken I have to list all the issues first then see if they could be resolved – it’s not part of Webkit per se on top of that, but rather the Safari Team @ Apple so it makes it even more complicated to deal with.