False browser rendering due to subpixel translateX

scarlachs commented 1 year ago

Checks

[X] Not a duplicate.
[X] Not a question, feature request, or anything other than a bug report directly related to Splide. Use Discussions for these topics: https://github.com/Splidejs/splide/discussions

Version

4.1.4

Description

Images, SVGs and also text appear blurry because the transform: translateX() allows sub-pixel. If the value is rounded to whole pixels, the content is no longer blurry.

Reproduction Link

No response

Steps to Reproduce

Mount a slider with draggable true, bette to have it on free. Drag the slider across and have a decimal number for translateX(), e.g. translateX(-3219.8281249998445px).

Expected Behaviour

Even when dragged, don't allow values with comma, only allow whole numbers.

honey32 commented 8 months ago

maybe using Math.round like

 style( list, 'transform', `translate${ resolve( 'X' ) }(${ Math.round(destination) }px)` );

will solve this problem https://github.com/Splidejs/splide/blob/d7e1f08e6b4f4b02a7c6ccbfbeb2d569d85715e6/src/js/components/Move/Move.ts#L125

honey32 commented 7 months ago

I'll make PR soon. (maybe today)

Splidejs / splide