В Safari невидимое деление позиции со свитком переполнения невидимо - PullRequest
Новая
       108

В Safari невидимое деление позиции со свитком переполнения невидимо

0 голосов
/ 21 марта 2020

Я пытаюсь сделать некоторые пользовательские макеты с библиотекой (Quill JS Rich Text Editor), и я сталкиваюсь с неприятным Safari bug .

Если вы посмотрите на этот JSFiddle в Chrome / Edge / Firefox, вы увидите, что есть две панели, которые прокручиваются по горизонтали: 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>

Заранее спасибо!

1 Ответ

1 голос
/ 21 марта 2020

Не уверен, что это правильно, потому что я добавляю дополнительный 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;
}
...