Fix border card hover safari

[sofiamatulis]

Why are these changes introduced?

Fixes #1121 .

What approach did you take?

Updated the z-index for the card and the media. The reason this was happening is because when we apply transform or opacity (which we are for the animation), the order doesn't stay the same even with position: relative. So the solution is to set the index. More here: https://coder-coder.com/z-index-isnt-working/

Other considerations

Demo links

Test on safari:

• Editor

Checklist

• Followed theme code principles
• Linted with Theme Check
• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[kmeleta]

Good find! I think we just need to fiddle with it a little more to ensure we don't cause shadow overlaps. Hopefully it's straightforward adjustment.

[sofiamatulis]

I have opted to fix this with z-index since it's a cleaner/more intuitive solution, but I found a thread about this same bug here: https://discourse.webflow.com/t/safari-not-hiding-overflow-on-rounded-corner-divs/55060

Another solution for Safari seems to be to apply:

 -webkit-mask-image: -webkit-radial-gradient(white, black);

[kmeleta]

Nice! glad the z-index fix could still work out. Tested the fix in safari and looked for shadow/z-related regressions and didn't notice any issues.

[kmeleta]

I know we try to avoid comments in code, but I'm tempted to include a short one on this line that makes it known it's needed for a safari bug. I could see it appearing as though it's not doing anything and getting removed in the future. Not sure how everyone feels about that..

[tyleralsbury]

It might be a good idea - CSS isn't very self-explanatory.

[kmeleta]

I figure if it was a cross-browser bug or even a chrome bug it'd be fine, but I think it'll get overlooked in safari, especially being an on-hover issue.

[sofiamatulis]

Good point! Added

[tyleralsbury]

Approved - Maybe add a comment like Ken mentioned.

[kmeleta]