带有溢出滚动的固定位置Div在Safari中不可见

问题描述 投票：0回答：1

我正在尝试使用一个库（Quill JS富文本编辑器）来做一些自定义布局的事情，而我遇到了一个令人讨厌的Safari bug。

如果您在Chrome / Edge / Firefox]中查看此JSFiddle，您将看到有两个面板可以水平滚动：https://jsfiddle.net/sfcu38to/

但是，如果您在Safari中查看它，则顶部面板是不可见的。我已经读到这是Safari中的错误，但我希望有一个解决方法。我无法更改标记，但是可以更改CSS。

关于如何使顶部面板在Safari中可见的任何想法？

如果要尝试将其加载到浏览器中的文件中，则为完整代码。如果要使其滚动，则必须添加更多的<span>和<b>标签。

<html>
<head>
<style type="text/css">
.toolbar{
  background-color: #DDD;
  height: 50px;
  position: fixed;
  left: 0;
  right:0;
  bottom:0;
  overflow-x:scroll;
  white-space:nowrap;
}
.panel{
  background-color: #444;
  height: 50px;
  position: fixed;
  bottom:50px;
  left: 0px;
  right:0px;
  white-space:nowrap;
  overflow-x:scroll;
}
span{
  display:inline-block;
  width:40px;
  height:40px;
  border-radius:20px;
  background:#333;
  margin:5px 10px;
}
b{
  display:inline-block;
  width:40px;
  height:40px;
  border-radius:20px;
  background:#999;
  margin:5px 10px;
}
</style>

<body>
  <div class="toolbar">
    <span></span>
    <span></span>
    <span>
      <div class="panel">
        <b></b>
        <b></b>
        <b></b>
      </div>
    </span>
    <span></span>
    <span></span>
  </div>
</body>
</html>

提前感谢！

我正在尝试使用库（Quill JS富文本编辑器）进行一些自定义布局，并且遇到了一个令人讨厌的Safari错误。如果您在Chrome / Edge / Firefox中查看此JSFiddle，则会看到...

html css safari css-position
1个回答
0
投票

不确定它是否正确，因为我添加了额外的div ...，但可能会给您提示。我可以在Safari中使用https://codepen.io/Vova_Champion_1/pen/dyojBZj

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.