1914190 - github.com - This SVG screencast from create-react-app is displayed broken with Thai locale installed [Linux]

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect, P2)

Description

[Raul Bucata]

Environment:
Operating system: Linux
Firefox version: Firefox 117.0

Preconditions:
Make sure Thai locale is available sudo apt install language-pack-th language-pack-gnome-th

Steps to reproduce:

1. Navigate to: https://github.com/facebook/create-react-app/blob/main/screencast.svg
2. Observe the SVG

Expected Behavior:
SVG loads

Actual Behavior:
SVG is broken making screencast unreadable

Notes:

• Reproduces regardless of the status of ETP
• Reproduces in Firefox Nightly, and Firefox Release
• Does not reproduce in Chrome

Created from https://github.com/webcompat/web-bugs/issues/127536

Comment 1

[Daniel Holbert [:dholbert]]

jfkthame, would you mind seeing if you can reproduce this and if you can make sense of what's going wrong?

Additional notes:

• The STR mention https://github.com/facebook/create-react-app/blob/main/screencast.svg (which is a GitHub presentation of the SVG), but you can probably more-directly just go to the SVG file itself, here:
  https://raw.githubusercontent.com/facebook/create-react-app/dd420a6d25d037decd7b81175626dfca817437ff/screencast.svg

• Here's a screenshot of the bad rendering from our original webcompat/web-bugs github issue.

Comment 2

[Jonathan Kew [:jfkthame]]

I tried installing the Thai locale packages on my Ubuntu system, but was not able to reproduce this with a recent version of Firefox; the SVG renders fine for me.

I notice the report mentions Firefox 117.0, which is quite outdated; Raul, can you check whether the problem still exists in a current Release or ESR version? (I wasn't able to try 117 locally, as I'm getting a content-process crash when I try to run such an old version via mozregression here.)

Comment 3

[Jonathan Kew [:jfkthame]]

I tried older builds (thanks @dholbert for pointing me at the relevant prefs to get them running!), and still can't reproduce this.

Raul, if you still see the problem with current versions, I think we'll need to look more closely at your fontconfig setup to figure out what's triggering the bad scaling.

Comment 4

[Raul Bucata]

I can only reproduce the issue now, if I launch Firefox from the terminal, with the THAI locale enabled, by typing LC_ALL=th_TH.UTF8 firefox in the terminal. This reproduces regardless if I set the language in the device to THAI or ENGLISH.

I can only launch Firefox Release in THAI version, I can not launch Firefox Nightly, Beta, or ESR with LC_ALL=th_TH.UTF8 command in the terminal

Notes:

• Setting the language to Thai directly from the browser settings does not reproduce the issue
• Thai locale pack needs to be installed in the device (sudo apt install language-pack-th language-pack-gnome-th)

Comment 5

[Jonathan Kew [:jfkthame]]

OK, I see what's going on here. I think it will actually reproduce even without the Thai language pack resources installed; it depends only on running Firefox with the Thai locale setting, which you can do from the terminal even if the locale isn't installed and so can't be chosen via GUI settings.

The problem arises because the SVG is using a very small font-size (1.3px, according to the inspector) for its text, which is then scaled up using a transform to the actual desired size. But the original font-size is affected by the font.minimum-size.th pref (set to 13 by default on Linux).

So setting font.minimum-size.th to zero (like all the other font.minimum-size.* prefs) will stop this happening. Maybe we could do that by default; I suspect the non-zero setting was created long ago because the available Thai fonts on some systems tended to render very poorly at small sizes, but with improved font availability and better screens, it may be less necessary now.

Alternatively, perhaps we should exempt SVG content from the font.minimum-size prefs altogether, on the basis that overriding the specified font size in SVG text elements is quite likely to have bad effects on the image as a whole, since the text elements will have been placed assuming a specific size.

Comment 6

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1914190 - Don't apply the font.minimum-size.* settings to text in SVG documents. r=#layout

Comment 7

[Jonathan Kew [:jfkthame]]

Attachment: Bug 1914190 - Add reftest to check that Thai locale does not disrupt small font sizes in SVG. r=#layout

Comment 8

[Jonathan Watt [:jwatt]]

(In reply to Jonathan Kew [:jfkthame] from comment #5)

Alternatively, perhaps we should exempt SVG content from the font.minimum-size prefs altogether, on the basis that overriding the specified font size in SVG text elements is quite likely to have bad effects on the image as a whole, since the text elements will have been placed assuming a specific size.

This seems like the right thing to do to me.

Comment 9

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/26a9df6d68c1
Don't apply the font.minimum-size.* settings to text in SVG documents. r=jwatt
https://hg.mozilla.org/integration/autoland/rev/19f297419354
Add reftest to check that Thai locale does not disrupt small font sizes in SVG. r=jwatt

Comment 10

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/49165 for changes under testing/web-platform/tests

Comment 11

[Narcis Beleuzu [:NarcisB]]

https://hg.mozilla.org/mozilla-central/rev/26a9df6d68c1
https://hg.mozilla.org/mozilla-central/rev/19f297419354

Comment 12

[Web Platform Test Sync Bot [:wpt-sync] (Matrix: #interop:mozilla.org)]

Upstream PR merged by moz-wptsync-bot