Fix: Blurry text when devicePixelRatio is less than one

[lTyl]

Summary

This PR fixes a bug where the text will be blurry on devices that have a devicePixelRatio less than 1. This is an edge-case I had to debug and fix on production for an enterprise Pixi application a few years ago, so when I was casually browsing the source code and noticed it, I forked it to add this fix so you don't get caught by it too. All this PR does is changes the check for your resolution Pixi configuration option to be a <= instead of a strict ===. Effectively clamping the resolution to 2 if the devicePixelRatio is less than 1.0.

The Bug

Having a devicePixelRatio less than 1.0 is generally pretty unusual, however it is much more common in enterprise environments (office workers, construction workers, product planners, etc) due to both accessibility tools or janky browser plugins/extensions often mandated by corporate IT departments. The easiest way to reproduce this is to change your browser zoom to be less than 100%.

Reproduction Steps

1.) Easiest way to repro this is to change your browser zoom to be less than 100%.
2.) Load up early.quadratic.to. If your devicePixelRatio is less than 1.0, you should notice blurry text.

Here is what I saw:
Before:

After:

Overall a very cool product! Best of luck to y'all :D

Cheers.

[davidkircos]

Hey @davidfig have you run into this issue before?

[davidfig]

I've seen this code before in pixi projects. I expect the blurriness may have something to do with the resolution for the bitmapText (which defaults to the renderer resolution). I wasn't able to replicate with the instructions above, but if it helps in edge cases, there's no harm in setting a floor for the resolution at 2.

[lTyl]

Yeah, so all Pixi is doing is multiplying by the devicePixelRatio and once you're dealing with floats less than 1, everything will naturally start to get smaller. A more common render for cases like this would look like this: (0.97):

Functionality wise, everything still works, aside from the "everything is blurry." By flooring the resolution to 2, now it's effectively going "Yeah, your browser is wrong. So we're going to ignore it. Handle zoom in the app."

[davidkircos]

Should we completely floor the resolution at 2 using the code below? If the resolution is between 1 and 2 is it better to use the exact number or just go straight to 2?

window.devicePixelRatio <= 2 ? 2 : window.devicePixelRatio,

I am also having trouble replicating your issue.

[lTyl]

Should we completely floor the resolution at 2 using the code below? If the resolution is between 1 and 2 is it better to use the exact number or just go straight to 2?

window.devicePixelRatio <= 2 ? 2 : window.devicePixelRatio,

I am also having trouble replicating your issue.

What is your devicePixelRatio with a 100% browser zoom? Mine is 1, but if you are on a Mac or have a fancy display is may be higher as a base.

Here is a snippet you can toss into your browser console to help:

const initialRatio = window.devicePixelRatio;
window.addEventListener('resize', () => {
    if (initialRatio !== window.devicePixelRatio) {
        console.log('Browser is going zoom zoom', window.devicePixelRatio)
    }
});

In my case, when the app is zoomed to 100% and my devicePixelRatio is less than 1, I get a blurry render.