Incorrect nav button position

[vsemionov]

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]

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

[nolimits4web]

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

[vltansky]

hhh right, expected it to be much lower :)

[vsemionov]

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

[vsemionov]

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]

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