category page `add to cart` `view cart` buttons slightly misaligned (Safari)

haszari commented 4 years ago

Describe the bug

On product pages, in the related products section, if you add an item to cart, the view cart button is misaligned. May not affect all browsers – I saw this in Safari.

Isolating the problem (mark completed items with an [x]):

[x] I have deactivated other plugins and themes and confirmed this bug occurs when only WooCommerce + Storefront theme are active.
[x] I can reproduce this bug consistently using the steps below.

Spotted when testing 2.5.6 RC 1.

To Reproduce

Steps to reproduce the behavior:

Go to a product page.
Scroll down to Related products
Click Add to cart for a related product.
The View cart button is offset vertically by 1-2 pixels.

Screenshots

Expected behavior

Neighbouring buttons should always align vertically and look consistent.

Browser Environment

Platform: macOS
Browser(s): Safari

haszari commented 4 years ago

Saw this again when testing 2.5.8 RC 1. Confirmed this affects Safari only and category pages or related products - i.e. not all add-to-cart buttons.

Category page, e.g. product-category/tshirts:

Also affects my-account orders with more than one button:

This is a minor visual issue, only affecting Safari - so not an urgent priority to fix.

joashrajin commented 2 years ago

I noticed this too and it seems to be due to the buttons using display: inline-block;

Quite an odd one since it only affects Safari. To fix it, we could either move the second button up by 1px (which isn't ideal) or consider using something like inline-flex which seems to work much better on all browsers. Unless we are able to fix it another way.

woocommerce / storefront