1

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.

Kalane
  • 57
  • 2
  • 8

1 Answers1

1

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...

Kalane
  • 57
  • 2
  • 8
  • Thank you for posting your solution! In my case, I wasn't using `will-change`, but I was using a `transform` to scale the canvas. When I switched it to using width/height to scale instead, it worked perfectly. – iangilman Apr 26 '23 at 23:16