Blurry on iPhone

[gedesurya125]

Hi, the rive animation blurry on iPhone. but for android and desktop is fine. I use the setCanvasRef and setContainerRef to create the rive container because i need to control the canvas containing element. Here is the codesanbox link for the reproduction https://codesandbox.io/s/rive-react-reproduce-yq6nss?file=/src/RiveContainer.js

[caudetgit]

@gedesurya125 Which iOS version are you seeing the blurriness? We don't see any visual issues with your codesandbox on iOS Safari 16.3.1+ which is the version in which Apple addressed a rendering issue that caused some visual artifacts.

[avivian]

Hey @gedesurya125

When you say you are "controlling" the canvas element, what exactly are you doing? We adjust the height and width of the canvas element in the library to take into account the devicePixelRatio, so I'm wondering if these are getting overridden?

I had a look at your repro and it looks fine to me on my iphone. I can also see the width and height are set correctly:

<canvas class="rive-canvas" width="800" height="800" style="width: 400px; height: 400px;"></canvas>