react-view-pager icon indicating copy to clipboard operation
react-view-pager copied to clipboard

Translate3d with fractional pixels leads to blurry images

Open p-j opened this issue 5 years ago • 0 comments

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

p-j avatar Sep 21 '18 16:09 p-j