android - 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 上的隐身选项卡上打开该页面，它会按预期工作。