amp-story-player: previous and next story buttons not visible in Safari

[fraserb99]

Description

The buttons used for skipping between stories are not visible on Safari browsers. This includes macOS and iPadOS Safari.

Reproduction Steps

1. Navigate to https://000615502.deployed.codepen.website with a browser that isn't Safari and open a story from the carousel. The skip buttons are correctly shown on either side of the story.
   

2. Navigate to https://000615502.deployed.codepen.website with Safari. The buttons are not visible. They are functional and can be clicked, they are just invisible
   

Relevant Logs

No response

Browser(s) Affected

Safari

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

[processprocess]

Hi Fraser. Thank you for filing this :)

It appears to be an issue specific to how Safari determines z space which is pretty interesting.
In Safari, translateZ will override z-index. Check out this thread on if you're curios.

This line appears to be the culprit.

Possible solutions:

1. Remove the 1px translateZ on the active iframe, changing it to: transform: translate3d(0, 0, 0). This should be safe since the other iframe panels do not have a translateZ value.
2. Add a 2px translateZ on the buttons (not recommended since it's a patch)

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

[ychsieh]

Not reproducible