CODEWITHSUNDEEP
htmlcsssafaricss-position
Clifton Labrum
Clifton Labrum

Reputation: 14068

Fixed Position Div with Overflow Scroll Is Invisible in Safari

I am trying to do some custom layout stuff with a library (Quill JS rich text editor), and I'm running into a nasty Safari bug.

If you look at this JSFiddle in Chrome/Edge/Firefox, you'll see that there are two panels that scroll horizontally: https://jsfiddle.net/sfcu38to/

But if you look at it in Safari, the top panel is invisible. I've read that this is a bug in Safari, but I'm hoping there's a workaround. I can't change the markup, but I can change the CSS.

Any ideas on how I can make that top panel visible in Safari?

Here's the full code if you want to try loading it in a file in your browser. You will have to add more <span> and <b> tags if you want to make it scroll.

<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>

Thanks in advance!

Upvotes: 1

Views: 1044

Answers (1)

Champion
Champion

Reputation: 774

Not sure if it's correct, because I add extra div ... but probably it gives you a hint. It work in Safari for me 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;
}

Upvotes: 1

Related Questions