Why is the 'Quickadd' button not displaying correctly in Safari?

Store Design
1

The grid is showing well on Chrome, FF, IE
But on a Safari browser the ‘Quickadd’ buttons are not under the image.

I did not changed the code of the Fragment ‘card-product.liquid’

OneSumo_0-1664264319373.png
OneSumo_0-1664264319373.png1268×904 302 KB

2

Would you share the store URL with password in case it is not public?

3

To test i have created a temporary shop, i just added 2 product under 1 collection. I did not changed any code. The theme is Dawn
https://sumosolutions.myshopify.com/collections/all

password of the shop is: skiack

The problem is only on a Ipad Air with Chrome, safari and google browser.

On other Operating systems I can not reproduce this problem.

OneSumo_0-1664397789763.png
OneSumo_0-1664397789763.png1522×984 97.9 KB

4

Oh boy that is hard to test for. What I would do is add some absolute value to the height of the element. For example like this:

.card:not(.ratio)>.card__content {
    grid-template-rows: max-content minmax(0,1fr) max-content auto;
    height: 20vh;
}

Then you can check on the ipad again - if it looks good you could figure out absolute values for each of the viewport sizes. I’ll help you with that but first we have to find out if that’s the fix.

You will find the code in online shop → theme-> edit code->component-card.css

It looks like this right now and should be like my above code afterwards:

.card:not(.ratio)>.card__content {
    grid-template-rows: max-content minmax(0,1fr) max-content auto;
}

Gruss…Mark