CSS div overlay标签适用于桌面设备上的Chrome，但不适用于Android上的Chrome

Question

我有一个简单的叠加<div>标记，可以在图像上放置一些文字。这是HTML代码：

<div class="single_image">
  <div id="example-1" class="thumbs">
    <a href="images/photos/01/DSC05689.jpg">
      <img src="images/m1.png" alt="">
    </a>
    <a href="images/photos/01/DSC05690.jpg"></a>
    <a href="images/photos/01/DSC05692.jpg"></a>
    <a href="images/photos/01/DSC05693.jpg"></a>
    <a href="images/photos/01/DSC05694.jpg"></a>
    <a href="images/photos/01/DSC05705.jpg"></a>
  </div>
</div>
<div class="overlay">Tap to view</div>
</div>

这是桌面计算机上Chrome浏览器中的代码：

但是，如果我在Android上的Chrome中打开该页面，则文字会落在图片下方，这就是我得到的内容：

这是我的CSS：

.overlay {
  pointer-events: none;
  position: absolute;
  top: 25px;
  right: 50px;
  width: 200px;
  height: 25px;
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}

这可能是什么原因？

Answer 1

这似乎是浏览器缓存的问题。如果我在Android上的隐身标签上打开该页面，它会按预期工作。