Skip to content
This repository was archived by the owner on Apr 11, 2020. It is now read-only.

Translate3d with fractional pixels leads to blurry images#73

Open
p-j wants to merge 1 commit into
souporserious:masterfrom
p-j:master
Open

Translate3d with fractional pixels leads to blurry images#73
p-j wants to merge 1 commit into
souporserious:masterfrom
p-j:master

Conversation

@p-j
Copy link
Copy Markdown

@p-j p-j commented Sep 21, 2018

Hi !

We've been using react-view-pager for a while, so first, thanks for this project and for open sourcing it!

I've noticed recently that, in our use case, for odd resolutions, the trackPosition could end up being a fractional number.
This, linked to the usage of translate3d produces blurry images on Chrome (I didn't test other browsers).

With this in mind, there are 2 possible solutions:

  • Switch to translate instead of translate3d and loose the performance advantage that translate3d offers. The z being fixed to 0 it will be a non breaking change.
  • Round the positions to nearest int to ensure sharp images, this may not work for everyone but it combine performances with sharpness.

In this PR I've chosen the second solution as both performance & sharpness are important to us; but the translate solution could also be "good enough".

Below are two examples, if you look at the bread crust you can see the difference in sharpness.
blurry
sharp

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant