Blurry Borders because of the half-pixel transform

spiros.dimopulos.extern's Avatar

spiros.dimopulos.extern

20 Jul, 2017 12:46 PM

Hallo,

We have the issue with the blurry borders. You can see the issue here: https://www.idealo.de/preisvergleich/OffersOfProduct/4877405_-wya-81643-le-beko.html. In the image gallery at the top left, the borders of the thumbnails are blurry. We applied the fix proposed: http://help.dimsemenov.com/kb/royalslider-jquery-plugin-issues/font-flickering-or-blurriness. It improved it but did not fix it completely. The issue is that the style transform: translate3d(0px, 11.5px, 0px); applied through js to the rsThumbsContainer contains sometimes a .5px. Could you please provide a fix of that, so that the result of the calculation is always an integer and does not contain decimals? That would be perfect.

Thank you!

  1. Support Staff 1 Posted by Dmitry Semenov on 20 Jul, 2017 03:08 PM

    Dmitry Semenov's Avatar

    Hello,

    You're right, the issue is related to your 1px border and half pixel transform. You may get unminified version of slider (either from CodeCanyon or from build tool) and modify jquery.rs.thumbnails.js module, around line 300:

    self._setThumbsPosition((self._thumbsViewportSize - self._thumbsContainerSize) / 2);
    

    I'll likely apply the fix in one of the next releases, if there won't be any issues with some layouts that I'm concerned about.

    As an alternative, you may disable thumbs.autoCenter option (so thumbs will be top-aligned), or make sure that height of the container is always even.

  2. 2 Posted by spiros.dimopulo... on 24 Jul, 2017 06:50 AM

    spiros.dimopulos.extern's Avatar

    Hi Dmitry,

    Thank you very much for the hint. I changed the jquery.rs.thumbnails.js and now it works perfect.

    BR,
    Spiros

  3. spiros.dimopulos.extern closed this discussion on 24 Jul, 2017 06:50 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac