Closed shaahmad closed 3 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?
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.
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.
Issue appearing for both of us, details noted in initial description.
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:
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.
It seems that to render SVGs consistently across browsers we need to either:
<text>
into vector shapes server-side (I think this might increase the SVG size significantly?)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:
width
to anything that results in one pixel less, like width: 99.9%
padding-left: 1px
(margin, padding-top don't work)Will experiment a little more to see if there's an "even more invisible" solution I can come up with 😄
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.
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?
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.
@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?
@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...
@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?
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:
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.
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?
@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?
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.
(Just sharing this from our meeting today.)
To regenerate the SVGs, you can just delete:
/exports/*.svg
– this contains the SVGs that are embedded in articles.
weekly-icu-admissions-covid-a12e9e4f79c8fdab6f5e67fe666e4232_v172_850x600.svg
. /grapher/exports/*.(svg|png)
– this contains the SVGs and PNGs of individual charts, with default query parameters.
After a long time, this is now finally fixed for good!
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.