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

Question

我正在尝试使用库（Quill JS 富文本编辑器）做一些自定义布局，但我运行遇到了一个讨厌的 Safari 错误 。

如果您查看 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>

提前致谢！

Answer 1

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

<div class="conteiner">
<div class="toolbar">
    <span></span>
    <span></span>
    <span></span>
    <span>
      <div class="panel">
        <b></b>
        <b></b>
        <b></b>
      </div>
    </span>
    <span></span>
    <span></span>
    <span></span>
  </div>
  </div>

css

.conteiner{
  position:fixed;
  bottom: 0;
  height:100px;
}
.toolbar{
  background-color: #DDD;
  height: 100px;
  position: relative;
  bottom:0px;
  left: 0;
  right:0;
  overflow-x:scroll;
  white-space:nowrap;
}

.panel{
  background-color: #444;
  height: 50px;
  position: absolute;
  bottom:0px;
  left: 0px;
  right:0px;
  overflow-x:scroll;
  white-space:nowrap;
}
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;
}

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

Fixed Position Div with Overflow Scroll Is Invisible in Safari

html

css

safari

css-position