Font previews don't render on devices with DPR greater than 2
Closed this issue · 4 comments
To reproduce:
- Go to https://ae9is.github.io/react-fontpicker/
- In dev tools, open the "responsive design" / "device" toolbar (Ctrl-Shift-M in Firefox or Chrome)
- Either manually set the device pixel ratio to a value higher than 2, or select a device with a higher ratio (such as "Samsung Galaxy S20 Ultra")
(The issue also appears on my actual phone, but I figure using a browser is an easier way to replicate)
This does not seem to occur on the Vue project's demo; it looks like they're using a min-resolution media query rather than max-resolution.
...I think it's worse than I realized.
In addition, since the rules are generated in ascending order, it seems that on a device with DPR of 1, it still ends up using the 2x images since the max-resolution: 2dppx rule applies last.
Thank you for catching these!!
The font preview generation script in PHP ended up being refactored a bit in order to get it working for me, and to support the "lite" package previews generation, and that's where these bugs crept in.
I think the next major release might just drop PNG previews altogether and use SVG, since they're roughly the same size and quality is better.
Both packages on npm are updated now!