修复了Android Chrome上的定位错误

Question

因此，我在我们的网站上有一条简单的Flash消息，该消息应该在左下方固定放置。在移动设备上，我还添加了100％的宽度以使其看起来更好，并使用少量填充使其从边缘偏移。

这些Flash消息的容器位于正文的根目录中

#FlashMessages-Container {
    position: fixed;
    bottom: 0;
    left: 0;
    max-width: 550px;
    padding: 32px;
    z-index: 11;

  @include media-down(large) {
    max-width: 57%;
  }

  @include media-down(medium) {
    max-width: 100%;
    padding: 16px;
  }
}

这在所有浏览器的桌面上都很好用，在移动Android / Firefox，iOS / Safari甚至iOS / Chrome上也很好用。 但是，它无法在Android Chrome上运行，后者无法正确计算宽度。您可以从此DevTools屏幕截图中看到，当屏幕“宽度”仅为360px（即设备像素）时，它使Flash消息的宽度变成376px，因此右侧没有间隙。

如果我将位置设为绝对，则宽度是正确的，但它不是固定的。

这是令人讨厌的Android / Chrome视图：

相关的开发工具样式：

---

这是看起来不错的Android / Firefox：

这也是iOS / Firefox：

最后，即使是iOS / Chrome，也奇怪地与Android表亲一起运行良好。