Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

False browser rendering due to subpixel translateX #1125

Open
2 tasks done
scarlachs opened this issue Mar 18, 2023 · 2 comments · May be fixed by #1264
Open
2 tasks done

False browser rendering due to subpixel translateX #1125

scarlachs opened this issue Mar 18, 2023 · 2 comments · May be fixed by #1264
Labels
bug Something isn't working

Comments

@scarlachs
Copy link

Checks

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.
@scarlachs scarlachs added the bug Something isn't working label Mar 18, 2023
@honey32
Copy link

honey32 commented Jan 12, 2024

maybe using Math.round like

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

will solve this problem

splide/src/js/components/Move/Move.ts

Line 125 in d7e1f08

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

@honey32
Copy link

honey32 commented Jan 15, 2024

I'll make PR soon. (maybe today)

@honey32 honey32 linked a pull request Jan 15, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(Move): round "translate" destination to prevent problems around images honey32/splide
2 participants
@honey32 @scarlachs