CSS div 覆盖标签在桌面上的 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 上的隐身标签上打开该页面，它会按预期工作。