Safari does not allow absolute position a element when using column-count - html

Question

I want to style divs in a container and give it an position:absolute.
The parent container uses column-count=3 to layout the elements.
This works fine in Chrome and Firefox, but Safari does not position the element right.
This is how it looks like in Chrome and Firefox:
This is Safari:
html,
body {
margin: 0px;
min-height: 100%;
height: 100%;
}
.app {
display: flex;
}
.list-wrapper {
margin-top: 25px;
}
ul li:first-child {
margin-top: 0px;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
column-gap: 0px;
column-count: 3;
column-width: 200px;
}
li {
border: 1px solid black;
margin: 4px;
padding: 20px;
overflow: hidden;
break-inside: avoid-column;
}
h1 {
height: 30px;
min-height: 30px;
line-height: 30px;
width: 100%;
margin: 0px;
}
li h1::before {
content: "";
position: absolute;
width: 24px;
height: 24px;
border-radius: 50%;
transform: translateY(-42px);
background: #7fb8ff;
border: 3px solid #0072ff;
box-shadow: 0 0 4px #aaa;
}
<div class="app">
<div class="list-wrapper">
<ul>
<li>
<div>
<h1>Title 1</h1>
<p>Just some content</p>
</div>
</li>
<li>
<div>
<h1>Title 2</h1>
<p>Just some content</p>
</div>
</li>
<li>
<div>
<h1>Title 3</h1>
<p>Just some content</p>
</div>
</li>
<li>
<div>
<h1>Title 4</h1>
<p>Just some content</p>
</div>
</li>
<li>
<div>
<h1>Title 5</h1>
<p>Just some content</p>
</div>
</li>
</ul>
</div>
</div>
Anyone any idea how I could fix this?

Answer 1

I havent tested this but it may work wrap the content inside the li element in a div and the put the "just some content" in a p element
<div class="app">
<div class="list-wrapper">
<ul>
<li>
<div>
<h1>Title 1</h1>
<p>jsut some content</p>
</div>
</li>
<li>
<div>
<h1>Title 2</h1>
<p>jsut some content</p>
</div>
</li>
<li>
<div>
<h1>Title 3</h1>
<p>jsut some content</p>
</div>
</li>
<li>
<div>
<h1>Title 4</h1>
<p>jsut some content</p>
</div>
</li>
<li>
<div>
<h1>Title 5</h1>
<p>jsut some content</p>
</div>
</li>
<li>
<div>
<h1>Title 6</h1>
<p>jsut some content</p>
</div>
</li>
</ul>
</div>
</div>