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.

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

Incorrect nav button position #4393

Closed
vsemionov opened this issue Mar 31, 2021 · 6 comments
Closed

Incorrect nav button position #4393

vsemionov opened this issue Mar 31, 2021 · 6 comments

Comments

@vsemionov
Copy link

Hi,

After upgrading from 6.5.0 to 6.5.2, the navigation buttons moved downward by half their height, and look wrong. I've tried with Chrome, Firefox and Safari on MacOS, all latest versions at the moment. The results are the same in all three browsers.

The issue is introduced by commit 2f18e00. It looks like merely a syntactical change, producing the same result as before. However, inspecting the buttons show that their margin-top properties are 0. Reverting it resolves the problem (although I'm sure that would create other problems).

CC @andymark-by

Best,
Victor

@vltansky
Copy link
Collaborator

can't see it in demos: https://swiperjs.com/demos#navigation

image

@nolimits4web
Copy link
Owner

nolimits4web commented Mar 31, 2021

@vltansky actually on your screenshot nav buttons are not centered vertically :)

@vltansky
Copy link
Collaborator

hhh right, expected it to be much lower :)

@vsemionov
Copy link
Author

@vltansky it's much more obvious when the buttons are styled to have a (semi-)solid background

@vsemionov
Copy link
Author

Thanks for the quick fix. I'd like to suggest centering the button using transform, instead of margin-top, unless there's a reason not to. That would make it centered even if it's resized by custom styling (like in my case). What I use as an override is:

margin-top: 0;
transform: translateY(-50%);

@nolimits4web
Copy link
Owner

There is a reason not to use transform, because with some sizes like let's say 25px height, and transforming to 12.5px can make it look blurry on some screens/browsers. So it is up to developers to tweak

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants