I've been given a design to implement which has a lightbox which has some content inside which includes links. This is all fine and working except for when it comes to iOS where it's not possible to interact with the content of a lightbox if its position happens to be on top of a video.
It's acting as though the video is on top of the lightbox content - even though it's behind. The issue occurs even with extremely simple barebones HTML.
Stripped back HTML:
<video id="home_video" controls preload="none" poster="http://www.videojs.com/img/poster.jpg" width="500">
<!-- video sources -->
</video>
<!-- positioned over the video -->
<div id="lightbox">
<a href="#" id="not-touchable">Not touchable on iOS</a>
<a href="#" id="touchable">Touchable because it's not over a video</a>
</div>
Associated stripped back styling:
#lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
}
#lightbox > a {
display: inline-block;
background: red;
padding: 20px;
}
#touchable {
margin-top: 400px; /* taller than video */
}
I've put together a jsfiddle example. It includes some JS which alert
s when you've successfully clicked/touched a link. On desktop browsers it's possible to click both links, on iOS it's only possible to click the second.
It might be worth noting that the issue occurs whether the lightbox is pre-opened on page, or after being explicitly opened as in this jsfiddle
I can think of a number of ways of hacking around the problem - such as moving the video off screen, replacing it with its poster image, or by transforming the video using translateX
to hide it, but I'd prefer to leave the video where it is, if possible.
Has anyone stumbled across this issue before and found a solution? Any pointers?