Safari中column-count布局下absolute定位元素异常问题求助

我需要给容器内的元素设置position:absolute样式，父容器采用column-count:3进行布局。该效果在Chrome和Firefox中显示正常，但在Safari中元素定位出现异常。

预期效果（Chrome/Firefox）：

Safari显示效果：

相关代码 #

CSS代码 #

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

HTML代码 #

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

解决方法 #

问题根源在于Safari对多列布局(column-count)中的绝对定位元素处理逻辑和Chrome/Firefox不同——绝对定位元素在Safari中会相对于整个多列容器定位，而非直接父元素。

方法1：给父元素设置相对定位 #

给h1添加position: relative，让伪元素的绝对定位以h1为参考基准：

h1 {
    height: 30px;
    min-height: 30px;
    line-height: 30px;
    width: 100%;
    margin: 0px;
    position: relative; /* 添加这行 */
}

方法2：改用Grid布局替代多列布局 #

如果项目兼容性允许，用CSS Grid实现三列布局可以彻底规避Safari的这个兼容性问题，同时布局更灵活：
修改ul的样式：

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px; /* 替代原有的margin控制间距 */
}

同时调整li的margin为0：

li {
    border: 1px solid black;
    margin: 0; /* 去掉原有margin */
    padding: 20px;
    overflow: hidden;
}

内容的提问来源于stack exchange，提问作者Olaf