Webkit scaling bug on rotate

[JayPanoz]

So there seems to be a rendering bug in Webkit – yet another one… –, specifically in scroll.

webkit-scale-bug.mp4

As you can see, when you rotate the screen in paginated mode, everything is fine, the font-size increases in landscape, and scales down to its correct scaling once you go back into portrait. This scaling down does not happen in scroll… And it’s not the only nasty bug we have to deal with.

So the fix is simple, it is:

:root {
  --webkit-text-size-adjust: 100%;
}

Except it is not, because this disables the zoom entirely, including our very own font-size… So I am not sure this is even resolvable through CSS…

[JayPanoz]

This is actually even worse because it looks like Webkit scales w/o taking the zoom factor into account on rotate… The scaling is based on the initial value.

Once again only happens in scroll… paginated is completely OK.

This is 80% in portrait

This is supposed to be 80% in landscape but it is exactly the same as 100%.

This is supposed to be 200% in landscape but is exactly the same as 80 and 100.

Note the heading is scaling as expected, the problem applies to paragraphs, which is consistent with #172

[JayPanoz]

Related links:

• https://github.com/scottjehl/iOS-Orientationchange-Fix
• https://www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/

[JayPanoz]

The only solution I can currently think to resolve the entire issue of is providing an iOS patch, as we did for iPadOS, that provides a flag to replace zoom with -webkit-text-size-adjust for the Font-size user setting.

The percentage we set for zoom seems to be working with this property on iOS – this can also be iPadOS when the site is requested in mobile instead of desktop.

Or maybe I dig deeper into resetting columns for scroll and the side-effects that create, because these bugs do not apply when columns are set… but an hour of testing different things has not yielded significant results…

Pinging @mickael-menu cos' chances are he will also be impacted.

[JayPanoz]

After further debugging it's another one of these cases where it is incredibly difficult to isolate the root cause of the issue.

The fact it does not happen in paginated but does in scroll is mind-boggling.

Tried a lot of things with dimensions, overflow, etc. Even when applying a column in scroll it happens so this would be indicative of more complex heuristics applying different results based on multiple and possibly derived factors.

[JayPanoz]

So in practice an iOS Patch using -webkit-text-size-adjust with the value for font-size in % works. But, it has to be handled as the deprecated implementation because it is not consistent with zoom re. metrics i.e. you need to account for the factor with zoom but not with -webkit-text-size-adjust. This means it impacts ts-toolkit as wel.

And possibly Swift Toolkit.

I’d really like to check if there is no other solution though – I do not think so, because it needs to be resolved by pure luck due to the missing debugging information, but who knows…

[JayPanoz]

So I have no idea how nor why but in scroll, after changing the orientation, Webkit decides to map 1rem|100%|etc. to 25px specifically for p. Even paragraphs in a header for instance are correctly mapped to 16px.

This does not happen in paginated. Just in scroll, as we know. And it never goes back to 16px