Safari:: before-элемент в столбце-кол-во в неправильном положении (ошибка?) - PullRequest
Новая
       35

Safari:: before-элемент в столбце-кол-во в неправильном положении (ошибка?)

0 голосов
/ 30 сентября 2018

Я обнаружил странное поведение в Safari, и теперь я не уверен, является ли это ошибкой или я что-то упускаю.

Когда я разделяю несколько абзацев в контейнере на два столбца (с помощьюиз column-count) и дополнительно придайте этим элементам absolute -позиционный :before -элемент, что-то странное происходит в сафари.Элементы: before во втором столбце не располагаются относительно своих абзацев.Вместо этого сафари притворяется с точки зрения своей позиции, что нет column-count и размещает их там, где обычно находятся абзацы (продолжение под первым столбцом).

Я что-то упустил или это ошибка?Если это ошибка, то она уже известна и есть ли обходной путь?

(Любой другой браузер отображает x 'во втором столбце рядом с их абзацами, как и должно быть)

Вот как это выглядит в Safari: Safari-Bug

.container {
  width:800px;  margin:0 auto; padding:2rem;
  column-count:2;
  -webkit-column-count:2;
}

.element:before {
  content: "x";
  position:absolute;
  display:block;
  margin-left:-1rem;
  color:red;
}
<div class="container">
  <p class="element">
    Paragraph I<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph II<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph III<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph IV<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph V<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VI<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VII<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VIII<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph IX<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph X<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
</div>

1 Ответ

0 голосов
/ 30 сентября 2018

Не уверен, что это известная ошибка, но вы можете исправить ее, используя position: relative вместо абсолютного. 

.container {
  width:800px;  margin:0 auto; padding:2rem;
  column-count:2;
  -webkit-column-count:2;
}

.element:before {
  content: "x";
  position: relative;
  display: block;
  margin-left: -1rem;
  margin-bottom: -16px;
  color: red;
  -webkit-transform: translateZ(0); // need this for safari to show position relative text
}
<div class="container">
  <p class="element">
    Paragraph I<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph II<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph III<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph IV<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph V<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VI<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VII<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph VIII<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph IX<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
    <p class="element">
    Paragraph X<br>
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
  </p>
</div>
...