Chrome: (Preview / Share) Display is very blurry

[robinkruyt]

When viewing a project in a browser the resulting screens are very blurry on Chrome, but not on Safari. This happens on both retina and non-retina screens. Only when viewed at exactly 100% of the designed resolution the result is (sometimes) not blurry. This is however never possible to enforce when sharing.

I am wondering why this is happening and if there is anything that could be done about it. Either by editing the design/export or by changing something in Framer itself.

---

The examples in the gallery also have this issue, see for example https://share.framerjs.com/rysvoazf50xq/ (not mine)

Attached is a screenshot of this problem

[briannhinton]

A quick Google search seems to explain that this is an issue with how Chrome is scaling images. The workaround appears to be to share your prototype using "no device." Then it won't scale.

[briannhinton]

Apparently text can be fixed with antialiasing added: https://github.com/koenbok/Framer/issues/408

I can't confirm either solution, and the antialiasing one doesn't seem to work for me.

[uloga]

The issue seem to be how css "transform" code is generated on frames. Depending on scenarios it can be fixed by adding .style = 'transform' : 'perspective(1px)' to main frame containing children as shapes, text, icons or images. Hope this will be fixed in next release.