无法在移动版Chrome中使“固定”工作？

Question

我正在使用以下样式在我的网站上显示一条消息：

.basic-message {
  position:fixed;
  top:3%;
  right:3%;
  z-index: 1000;
  cursor: pointer;
}

它在桌面浏览器中正常工作，请参见屏幕截图

或try it yourself。

，但在Android上的移动Chrome浏览器中无法使用，该消息位于页面的右上角（而不是窗口），就好像其位置是“绝对”一样。

看起来这是一个已知问题，我成功尝试添加meta标签：

    <meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi">

这使“固定”在桌面上可以很好地工作，但也使网站无法扩展，这是不可接受的。

我也尝试添加

-webkit-backface-visibility: hidden;

，但没有效果（至少在我的Android手机上）。

还有其他解决方案或解决方法吗？

EDIT1：

消息本身绝对是微不足道的：

.basic-message p {
  color: #ffffff;
  font-size: 1.4rem;
  text-align: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  border-radius: 0.25em;
  padding: 16px;
}
.error-message p {
  background: #e94b35;
}

    <div class="basic-message error-message">
            <p>The text goes here.</p>
    </div>

例如，this page在窗口的右下角有一个示例“ fixed”元素，该元素在缩放页面后无法在移动Chrome中正常工作。

EDIT2：

Adding -webkit-transform along with -webkit-backface-visibility如下

.basic-message {
  position:fixed;
  top:3%;
  right:3%;
  z-index: 1000;
  cursor: pointer;
  -webkit-transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
}

也不起作用。

EDIT3

在MS Edge移动模拟器中，它也会出现故障，请参见以下屏幕截图：

当我滚动页面时，它会跳转并定期消失：

Answer 1

似乎很奇怪。尝试找出为什么将属性位置重写为绝对值。使用检查器检查CSS中的位置以及设置了多少次。不应将其更改为绝对，而应保持固定。