Mobile Safari/iOS Rendering Issue - Absolute Positioned Elements Not Visible / Backgrounded

I've got an issue with visibility of HTML elements in Safari (Mobile and Desktop) not rendering in the foreground that I've spent at least 8 hours of dedicated troubleshooting on trying to address.

The concept I'm after seems very simple; I'm trying to display a couple of labels (<p>'s and <a>'s within a <div> that is position:absolute;. I'm leveraging a 3rd party Javascript coverflow that is forcing the absolute positioning but I'm willing to make any modifications needed to get this working.

I naturally assumed this was a z-index issue that was only effecting Safari but there are no rendering issues in Chrome, IE, Edge, and Firefox including Android mobile devices.

The issue can easily be reproduced on www.bibleanthem.com when looking at the media coverflow from iOS/Safari and likely macOS; for a brief second while it is initially loading, the elements are visible and then the album artwork moves to the foreground. You can also see a slight hint of the '+1' badge on the corner at the lower edge of the album artwork. You can even click where the two invisible buttons are and interact with the document (e.g. play song immediately or add to playlist).

What I've Tried

• Changing (and IIRC dropping entirely) transform usage from each Coverflow item (see "Additional Detail" section below for an important note)
• z-index changes (including absurdly large values like 10000000000000)
• Changing position to fixed, relative, sticky for the parent div
• Changing position to fixed, relative, sticky for child elements
• Changing display between block and inline-block
• Changing overflow on most elements in the hierarchy

Additional Detail

• I've seen issues in the past with Safari not playing nicely with transform; that could be the issue here and the symptoms are very similar to my past experiences but I haven't been able to fix the issue. This is where I'd guess the problem actually resides.

Rendered HTML for each Coverflow item

<div style="position: absolute; display: block; overflow: visible; left: 0px; top: 0px; margin: 0px; padding: 0px; max-width: none; max-height: none; border: none; line-height: 1; background-color: transparent; backface-visibility: hidden; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; width: 95px; transform: translate(142px, 119px); opacity: 1;"><p class="largeLabel"><a href="javascript:;" onclick="...not shown" title="Add to Playlist (play next)" class="rel-title-play-next round-button"><i class="fa fa-list-ol"></i><span class="badge">+1</span></a><a href="javascript:;" onclick="...not shown" title="Play Immediately" class="rel-title-play-now round-button"><i class="fa fa-play play-btn-adjust"></i></a></p><p class="smallLabel"><span class="title-cf-main">Song Title</span><br><span class="title-cf-artist">Artist Title</span><br><span class="title-cf-verse">Acts 17</span></p></div>

How To Reproduce

• Visit www.bibleanthem.com from desktop or mobile Safari and notice how the album artwork takes foreground positioning over the label/text.

Desired End State

• The blue background label, song title, artist title, and verse title should be visible above the album artwork in the coverflow (as seen in non-Safari browsers)

Thank you in advance for any assistance you can provide. I can't tell you how much I'd appreciate addressing this issue!

from Mobile Safari/iOS Rendering Issue - Absolute Positioned Elements Not Visible / Backgrounded