csssafarihtml5-canvascss-transformsimage-rendering

Scaled canvas pixelated bug on Safari

I need to scale up and transform a canvas and it works great with the following CSS property on Chrome for example:

canvas {
  image-rendering: pixelated;
}

But on Safari (macOS and iOS), it remains blurry.

I made a small codepen to check the issue: codepen link

Here is a screenshot of the wanted result on Chrome: Chrome result And here is the bug on Safari on my Mac: Safari result

Thanks a lot if someone has an idea! I have the feeling I tried almost everything but nothing worked.

Solution

  • The issue was the will-change: transform; property that I applied on the canvas.

    I still don't know why but if I remove it, it's not blurry on Safari anymore...