Card - Firefox shadow rendering issue

[MrDinsdale]

Expected Behaviour

The shadow should sit under the card on all browsers.

Current Behaviour

In Firefox 59.0b4 The pseudo elements for the card shadow sits above the card content:

Attempted Fixes

• Tried adjusting z-index to force shadows below card.
• Tried rolling back to 2.11 when the c-card--static modifier was introduced but no impact.
• The only solution found so far is by adding a c-card__inner element but isn't ideal and would be a breaking change.

Steps to Reproduce (for bugs)

0. Go to https://www.sky.com/shop/mobile/phones in Firefox
1. Observe the broken cards

Context

This causes rendering issues with live content but doesn't impact functionality.

Your Environment

Desktop, Firefox 59.0b4

[MrDinsdale]

Digging a little deeper, this only seems to be caused by <button class="c-card">. Non buttons seem to render correctly.

[MrDinsdale]

Currently the only fix I've found without breaking changes is to use <a> rather than the <button> for the c-card element. Not the most semantic but struggling to find an alternative.

[MrDinsdale]

This appears to have been fixed in the latest Firefox release:

Will leave ticket open to keep an eye on the issue.

[MrDinsdale]

This issue appeared again with FireFox 63.

Recommend we remove the pseudo shadows and replace with an animated box-shadow for an interim fix.

[nellarro]

@MrDinsdale, is it possible that this issue is resolved? Not seeing it in the most current version of Firefox or in Firefox Dev Edition. Otherwise, I'd be happy to take it on.