• Hello [name]! Thanks for joining the GMC. Before making any posts in the Tech Support forum, can we suggest you read the forum rules? These are simple guidelines that we ask you to follow so that you can get the best help possible for your issue.

HTML5 Blurry rendering on Chrome

JimPancakes

Member
I'm trying to get a crispy/pixelated look for my HTML5 game. While Firefox renders it perfectly Chrome doesn't. Chrome makes it look blurry.

From my testing the culprit is this line from the index.html file:
image-rendering: optimizeSpeed;

I've done some research on the web and changing "optimizeSpeed" to "pixelated" does make it look as I want it on Chrome but breaks it on Firefox. Changing it to "crisp-edges" does the opposed.

Does anyone know how to get pixelated visuals on all browsers?

This is the page that helped me:
https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
 

JimPancakes

Member
Here's how it looks on Chrome with default index.html settings:



And this is on Mozilla:



Is there any way to make it look like on Mozilla on all browsers???
 

kupo15

Member
I don't know much about HTML but is it possible the surface sizes or device window sizes are somehow different between the two browsers?
 

JimPancakes

Member
I don't know much about HTML but is it possible the surface sizes or device window sizes are somehow different between the two browsers?
I made the game so that it resizes both the surface and the game window on the fly based on the size of the browser window. Besides I don't see how than can make the visuals blurry... Regardless of the surface or the window size the visuals should still be sharp.
 
Top