Integer Scaling not applied in full screen?

[rainyskye]

It seems like integer scaling isn't being applied when full-screening?

When in the windowed(?) mode, it seems to be working properly, as zooming in while windowed you can see the pixels clearly, but as soon as you full screen, it becomes blurry again.

Macbook Pro - 16" M1 Max - macOS 13.3.1 Firefox 111.0.1 Safari 16.4

Windowed mode (zoomed)

Fullscreen mode

I tried to make my screenshots match native res as much as possible, but you can see the difference pretty clearly :p

[mihaip]

This was a deliberate change, since there were too many rendering artifacts (#106), especially when the full screen was only making things slightly larger.

I can see this being an option though (something like: "Scaling: Auto | Smooth | Crisp")

[rainyskye]

Okay yeah, that makes sense, the only reason I'd use full-screen or anything is for games and stuff, as it's more of an immersive experience, but having rendering issues makes sense to it's removal.

An option could be nice, but if the issue still inherently exists then it's not a high priority/required

[that-ben]

About the immersive experience, would you consider having full screen mode without up-scaling? That means with black border all around and the pixel ratio remains 1:1 (so perfectly crisp)

[livid]

For non-retina displays, image-rendering: auto may be better.

But for retina display, especially in full-screen mode, image-rendering: pixelated can provide really great integer scaling.

Here is SimCity 1.2 with image-rendering: pixelated:

You can use media query to detect retina displays.

https://css-tricks.com/snippets/css/retina-display-media-query/

[that-ben]

eww, a Plymouth arcology

[Shogun38]

Has there been any update on this? The screen is quite blurry at full screen on my CRT.

[that-ben]

@Shogun38 Meanwhile, just pop the browser console, type this and hit enter:

$('.App CANVAS').style.imageRendering = 'pixelated';

If you're running Chrome or Firefox, then you could add the free extension called Stylus and you could add that static CSS rule to the domain off which you're running InfiniteMac so you will never need to execute that javascript command manually again.

.App CANVAS {
    image-rendering: pixelated;
}

[mihaip]

This is now available as a setting: