search

rive-app / rive-react

React runtime for Rive
https://rive-app.github.io/rive-react
MIT License
808 stars 32 forks source link

Blurry on iPhone #150

Open gedesurya125 opened 1 year ago

gedesurya125 commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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>