search

owid / owid-grapher

A platform for creating interactive data visualizations
https://ourworldindata.org
MIT License
1.38k stars 229 forks source link

Text spacing incorrect on charts on Android mobile #360

Closed shaahmad closed 3 years ago

shaahmad commented 4 years ago

On my Pixel 3, virtually all charts have text spacing issues when opened in the Google Search "browser" and Chrome Beta. Appears to happen on @MarcelGerber's phone as well. Screenshot_20200327-195856

marcelgerber commented 4 years ago

Weird. I am neither seeing these issues on my Android 10 phone, nor on my PC.

Which browser are you using? Chrome? Can you try viewing https://ourworldindata.org/exports/life-expectancy_v21_850x600.svg in there, that should be the exact graphic that's shown in your screenshot above. Also, do you see issues on https://ourworldindata.org/grapher/life-expectancy itself, too, or only for the chart preview?

shaahmad commented 4 years ago

Weirdly, the issue has also stopped on my phone, but had been there for least a week beforehand. I'll keep checking over the next couple weeks and will close this issue if it doesn't return.

The issue initially existed on the main page itself and using Chrome.

marcelgerber commented 4 years ago

Hm. I'd guess some browser or device update has fixed this issue in the meantime.

I'm closing this issue for now, but feel free to reopen if you experience this issue again.

shaahmad commented 4 years ago

Issue appearing for both of us, details noted in initial description.

marcelgerber commented 4 years ago

Yep, as @shaahmad pointed out I'm now seeing this too, using Chrome Beta (83.0.4103.23) on Android.

One thing to note is:

danielgavrilov commented 4 years ago

Likely something to do with webfonts?

Embedded SVG previews load in an environment where we have either fetched or are fetching the necessary webfonts (Playfair Display and Lato), whereas standalone SVGs will use a fallback available on the system.

danielgavrilov commented 4 years ago

It seems that to render SVGs consistently across browsers we need to either:

  1. Load the webfonts within each SVG file
  2. Convert the <text> into vector shapes server-side (I think this might increase the SVG size significantly?)
marcelgerber commented 4 years ago

No, pretty sure this is just some Chrome bug, which is caused by the .article-content figure[data-grapher-src] img rule which sets width: 100%. I have found two potential fixes:

Will experiment a little more to see if there's an "even more invisible" solution I can come up with 😄

marcelgerber commented 4 years ago

Okay, turns out to be not-so-easy. Setting the width helped before, but now it doesn't any more (guess it only forced a re-render anyway). I too think this is related to web fonts, and is not easy too fix. I still think this is inherently a Chrome bug and not intended behaviour.

danielgavrilov commented 4 years ago

Ha, interesting that a re-render fixes it! Maybe we could do the lazy loading you suggested some time ago? Not a definite solution but maybe it will cause a long enough delay for the font to load?

marcelgerber commented 4 years ago

No, a re-render doesn't fix it consistently.

But I've been able to trim this all down to a very minimal reproducible demo, and have filed a bug with the Chrome team: https://bugs.chromium.org/p/chromium/issues/detail?id=1074416 Let's see what they have to say.

danielgavrilov commented 4 years ago

@MarcelGerber Awesome that you opened that you filed that bug! Thanks a lot!

It seems someone responded:

This sounds like it could have a similar root cause as issue 670672 - does adding "text-rendering: geometricPrecision" to the element (or one of its ancestors) help/have any effect?

marcelgerber commented 4 years ago

@danielgavrilov Yes, I've tried that and setting text-rendering: geometricPrecision indeed fixes this issue!

We can easily switch over to geometricPrecision for our code (we currently have optimizeLegibility), but to have it correct for old exports we'd probably need another "svg migration" task...

danyx23 commented 3 years ago

@MarcelGerber I just tried this on my android phone in an in-app browser and it looks like this issue is resolved - can you verify this?

marcelgerber commented 3 years ago

No, it's still an issue for me. For example, this is https://ourworldindata.org/co2-and-other-greenhouse-gas-emissions in the Slack in-app browser: Screenshot_20210707-083532.jpg

danyx23 commented 3 years ago

I checked and realized that I had set firefox as my default browser - after switching to Chrome it is broken again so upstream bug persists.

marcelgerber commented 3 years ago

I checked and realized that I had set firefox as my default browser - after switching to Chrome it is broken again so upstream bug persists.

Yes - maybe using text-rendering: geometricPrecision to our SVG exports would be a good fix?

danyx23 commented 3 years ago

@MarcelGerber yes I think we should do this. Having such weird text rendering is pretty annoying and it seems like this is not enough of a priority upstream to fix it anytime soon. Do you have an idea where to add this property? Every text instance in the export?

marcelgerber commented 3 years ago

We already set the exported SVG to be in optimizeLegibility mode here (and I don't quite know why?): https://github.com/owid/owid-grapher/blob/2e05034521cde8bd40ddefb95b1bbe62e540b666/grapher/captionedChart/CaptionedChart.tsx#L347

So, we could change that over to geometricPrecision which should resolve this issue. This will however only affect newly-generated SVG exports; to do the same for existing ones we would also need to run a s/optimizeLegibility/geometricPrecision/ replace in owid-static.

I have also bumped the Chromium issue, but still, I don't suspect it'll be fixed anytime soon.

danielgavrilov commented 3 years ago

(Just sharing this from our meeting today.)

To regenerate the SVGs, you can just delete:

marcelgerber commented 3 years ago

After a long time, this is now finally fixed for good!