Lichess on Galaxy S20, S22 font size issue

[Reddig]

Describe the bug
When I open the app on my S22 Ultra all of the fonts and UI are oversized. Some UI elements are cut off.

To Reproduce
Steps to reproduce the behavior:

1. Sign in on S22 Ultra

Expected behavior
It's formatted for a mobile phone not a tablet.

Screenshots

Smartphone (please complete the following information):

• Device: Samsung Galaxy S22 Ultra
• OS: Android 12

Additional context
Add any other context about the problem here.

[fyodor1]

I can confirm this bug.

I had the exact same behavior today on my Samsung Galaxy S20 FE. Lichess has worked flawlessly for months and this morning the fonts were suddenly MUCH larger. I strongly suspect an issue with the 7.15.1 update.

I was NOT able to replicate the bug on a Galaxy S21 or S7.

Deleting the app and reinstalling did not resolve the issue.

[veloce]

Cannot reproduce on a S21 Ultra which has a very similar screen it seems.

[veloce]

Cannot reproduce on the S20 (browserstack) as well. And I don't explain this issue as there were no sensitive CSS changes in the last release: v7.15.0...v7.15.1

[veloce]

One suspect would be the dark mode support plugin which changes webview settings, even though it seems to have no impact on font size calculation.
But I need to reproduce to prove that unfortunately.

[fyodor1]

@veloce , your comment about dark mode (which I have enabled) got me experimenting with it and the various "background" settings in the app, including "sync with system". None of that appeared to have an affect.

I did, however, manage to get the normal font size back to normal under some very constrained conditions:

Reboot the phone. Start lichess app IMMEDIATELY. Everything is normal. Close app, open app... Everything still normal. Wait a bit (about a minute) and the font size is too big when the app is opened. This occurs even without having previously opened lichess after reboot. I.e. rebooting, then waiting a minute or so, then starting lichess -> the fonts are too big.

This behavior was completely consistent regardless of dark mode and background in app.

I have still not managed to reproduce on Galaxy S21 or S7.

[fyodor1]

Video of bug occurring after multiple openings. Sped up X2. Once bug occurs, it doesn't go away again until next reboot (and then only for a minute or so, as explained previously).

Screen_Recording_20220312-180411_lichess_1.mp4

[veloce]

Thanks for the detailS. What a strange bug.

[fyodor1]

I finally managed to install an older version of Lichess and the bug was still present. After going through all the updates my phone installed the same night as the Lichess update, the obvious candidate was an update to WebView (to 99.0.4844.58, presumably from 98.0.4758.101). It's not immediately possible to install old versions of WebView (why make things easy?), but uninstalling all updates to it (bringing it it version 93.x) did fix the issue, seemingly confirming that WebView at least plays a part in the bug.

WebView version 99.0.4844.58 is, however, also installed on a bunch of devices where the font size bug does not occur (e.g. Samsung Galaxy S7 and Samsung Galaxy S21).

It is possible to install beta, dev, and canary versions of WebView and switch between them in developer mode. Unfortunately, all channels exhibit the same errant behavior on my S20 FE at present.

I don't understand why the bug only occurs a minute after startup. Perhaps some sort of accessibility service starts up that causes an incorrect pixel ratio / screen density to be reported? I have not (deliberately, at least) enabled any such services and the settings that I could find ("Font size and style" and "Screen zoom") are identical to the S21 where the text is scaled properly.

It would be quite useful to confirm if all identical model phones exhibit the same behavior.

[veloce]

Thanks for your findings! I wonder if the bug is tracked already in chromium project: a quick search didn't find anything.
I agree it's hard to understand why does the bug occur only 1 minute after startup.

Btw if you quickly want to install an old version of the app, you have them all under the releases menu of this GitHub project. Plus you can download debug builds of the app under the "actions" section, see android build action.

[fyodor1]

I looked at the git compare between the 98 version and the new 99 version, but the number of changes is somewhat overwhelming. There was one commit related to DPI reporting of new windows, but it didn't seem relevant. Then there were a lot of changes to -webkit prefixes, but again nothing that really stood out.

My problem with installing old versions of lichess was that the current version wasn't being uninstalled properly and installing the old versions then failed with an "APK appears to be invalid" error, which is a rather useless (and wrong) error message for that. I only figured out the problem after trying to install a debug build of lichess that I had built myself. For some reason, trying to install that resulted in a much more appropriate error message ("The package conflicts with an existing package.").

Looking at pixel aspect ratios and reported css dimensions, nothing stands out with the two phone models where we've seen the bug. I'm tempted to try a factory reset of my phone in lieu of testing on the same model. It's a bit of a pain and it would be nice to confirm the bug on a different phone of same model instead.

[Drukob]

I can confirm the exact same behavior on the Samsung A52s 5G. I found another forum thread about this exact issue (including the weird behavior after a restart) in another app (in German tho): https://forum.leitstellenspiel.de/index.php?thread/22367-android-app-anzeigegr%C3%B6%C3%9Fe/ It definitely seems to be related to the WebView 99 on Samsung devices.

Searched the chromium bug tracker and found this issue: https://bugs.chromium.org/p/chromium/issues/detail?id=1305201&q=font%20size&can=2 and there seem to be some workarounds, maybe someone with more experience could these out?

[fyodor1]

This bug is not in Lichess, nor really in WebView. It's actually Samsung's Game Optimizing Service that is misbehaving.

It is possible to implement a workaround (although having Samsung fix their stuff would obviously be ideal). Either each user can install a plugin to Game Booster and change a setting - or we can implement a check in the app that sets the window to the correct size. My suggestion would be the latter since the changes required are very small and confined.

Two changes are required:

1. A change to WebView settings. Right now, we have a viewport meta tag in the html which sets a width, but WebView ignores this width by default. Just one line:

webView.getSettings().setUseWideViewPort(true);

I stuck it in Bridge.java just before webView.loadUrl (node_modules/@capacitor/android/capacitor/src/main/java/com/getcapacitor/Bridge.java), but it should be possible to do directly from e.g. FullScreenPlugin.java - I'm just not experienced in Ionic/Capacitor.

This setting should arguably be the default, since it is ignored if there is no meta tag and if there IS a meta tag, why are we ignoring it by default? There are historical reasons, of course, but none apply here and changing the setting should have no adverse effects.

2. A javascript call to set the meta tag to (js) screen.width instead of device-width. This should be safe to do on all devices, but we can narrow it to affected devices. On mobile screen.width and device-width are supposed to be identical, so we can simply test to see if that is the case and update the meta tag in case they don't match. This can be done in the < body > of the index.html (index.mustache) file:

  <body>
    <script>
      if ((window.innerWidth != screen.width) && (document.querySelector)) {
        var content = 'user-scalable=no, width=' + screen.width;
        var viewport = document.querySelector('meta[name=viewport]');
        if (viewport) {
          viewport.setAttribute('content', content);
        }
      }
    </script>
  </body>

(fixed code block)

[bak1an]

user can install a plugin to Game Booster and change a setting

which plugin?

[fyodor1]

bak1an, see the referenced Chromium bug for details. It's called "Game Booster Plus" and is installed directly from Game Booster (using the puzzle-piece-with-arrow-down-icon). After installation, simply enable the plugin and set the mode to "high quality" for lichess.

[bak1an]

Thanks, it works indeed! What a horrible thing this game booster is.

[RemiSimard]

I have the same bug on my S20 FE. When down by a lot of material, the display and the touch get shifted, so that you have to tap above where you see the board. Quite annoying.. By uninstalling the updates to the Webview app, the display came back to normal.

[st1led]

bak1an, see the referenced Chromium bug for details. It's called "Game Booster Plus" and is installed directly from Game Booster (using the puzzle-piece-with-arrow-down-icon). After installation, simply enable the plugin and set the mode to "high quality" for lichess.

I tried this fix on my S20 FE. While this workaround solves the font issue, it really slows down lichess up to the point where the UI loses a lot of responsiveness.

[Drukob]

Seems to be fixed for me with the newest update of Android WebView (version 102.0.5005.78 from this week).
Just when I got used to the large fonts, now everything looks so tiny.. 😅

[fyodor1]

@Drukob are you sure it wasn't just working because the phone restarted? After a restart it takes a while for Samsung's services to start, so the issue doesn't present itself immediately after a boot.

On my Samsung devices, the issue is still present, even with the 102.0.5005.78 WebView update.

(And considering why the bug is present, this isn't going to be fixed in WebView - Samsung is reporting incorrect and inconsistent screen dimensions and a fix needs to come from Samsung.)

[st1led]

Got the WebView update to 102.0.5005.78 this morning, but I can confirm that the issue is still present on my end.

[Drukob]

You're right, sorry that was premature, it did indeed reappear after a while.

[Drukob]

Ok, this time I am pretty sure that it is fixed persistently, since the latest Samsung Update A528BXXU1CVG7. The visual bug has not appeared for the last week or so for me, even after restarts and everything, can anyone else confirm this? :)

[bak1an]

Ok, this time I am pretty sure that it is fixed persistently, since the latest Samsung Update A528BXXU1CVG7. The visual bug has not appeared for the last week or so for me, even after restarts and everything, can anyone else confirm this? :)

Yes, confirming that issue is gone with the latest updates. Version is different in my case though.

[st1led]

The issue is still there on my Galaxy S20 FE, but I'm still on the July 1 update (G781BXXS4FVF3).