Safari: :before-element in column-count on wrong positon (bug?)

Question

I found a weird behaviour in Safari and now I'm not sure whether it's a bug or if I'm missing something.

When I split multiple paragraphs in a container into two columns (with the help of column-count) and additionally give those elements an absolute-positioned :before-element something weird happens in safari. The :before elements in the second column are not positioned relative to their paragraphs. Instead safari pretends in terms of their position that there is no column-count and positions them where the paragraphs normally would be (continuing under the first column).

Am I missing something or is this a bug? If this is a bug is it known already and is there a workaround?

(Every other browser displays the x' in the second column next to their paragraphs as it should be)

This is how it looks in Safari:

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

Answer 1

Not sure if it's a known bug, but you can fix it by using position: relative instead of absolute.

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