Html 粘性元素不'；在iOS Chrome中无法正常工作

我正在使用一个网站（盖茨比），在一页的底部有一个粘条。我使用position:sticky将条粘贴到屏幕底部。不过，除了iOS中的Chrome浏览器外，其他所有移动浏览器都可以使用此功能

情景：

：此页有一个列表。单击某个项目时，它将在新选项卡中打开第二页

：这是带有粘滞条的页面，将在新选项卡中打开

问题：当我转到第一页时，单击该项目，然后转到在新选项卡中打开的第二页，底部工具栏中的粘滞条被覆盖。但是，如果您直接单击第二个页面的链接并访问它，则粘滞条可以正常工作

你们中有人以前遇到过这样的事情吗？这可能是iOS Chrome中的一个bug，还是我做错了什么

我用于粘滞条的代码：

.floating-bar {
  display: flex;
  position: sticky;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  bottom: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  box-sizing: border-box;
  background: white;
  border-top: 1px solid #dfe1e6;
  height: 60px;
  overflow: hidden;
  // + some paddings based on the viewport
}

请参阅以下GIF作为参考

• 从第一页开始访问：
• 使用URL直接访问：

---

这不是一个完整的答案，因为它还没有解决办法（到目前为止！），但我把这个发现放在这里，以防它帮助我们更接近解决方案

试着运行这两位代码。第一个是在a元素中没有“target=“\u blank”的站点，即它位于同一浏览器选项卡中。第二个具有target属性，因此会打开一个新选项卡。第一个正确显示sticky div，第二个仅在用户滚动时显示

无目标-正常工作：

有目标-不工作正常 转到站点

（似乎无法将其作为代码段运行）

第一页代码中有一个target=“\u blank”，这似乎会导致Chrome IOS出现故障

---

更新：虽然这篇文章中讨论的问题不一样，但人们似乎确实在IOS上的Chrome中遇到了问题，包括在一个案例中删除target_blank来解决这个问题。请参见

在IOS中的Safari上是否存在同样的问题？另外，你是如何设置填充物的？这是在vh/vw方面吗？您好，这在iOS的Safari上运行良好。填充基于宽度：填充：0 calc（约“50%-255px”）；是的，我刚刚看到了同样的情况（iPad IOS14 Chrome不工作，Safari OK）。特别奇怪的是，直接进入Chrome页面就可以了。我想可能有一些缓存问题-Chrome没有等待图像加载-但似乎没有。从链接中删除目标就成功了。我想我们必须等到谷歌解决这个问题。