自定义网页在iOS Safari显示异常，请求排查原因

问题场景 #

自定义网页在Windows Chrome、Android设备上显示正常，但iOS Safari中布局错位，已尝试width: fit-content无效。

页面代码 #

CSS代码

:root {
    --pixel: 0.322222222px;
}

.signs-block {
    height: calc(var(--pixel) * 53);
    display: flex;
    display: -webkit-flex;
}

.sign {
    border: solid 3px blue;
    margin-left: calc(var(--pixel) * 50);
}

.sign:first-of-type {
    margin-left: 0;
}

.squircle-content {
    position: absolute;
    width: 100%;
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.container {
    display: flex;
    display: -webkit-flex;
}

.space-between {
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.avatar {
    border-radius: 100%;
    width: calc(var(--pixel) * 159);
}

.margin-left-30 {
    margin-left: calc(var(--pixel) * 30);
}

.margin-left-47 {
    margin-left: calc(var(--pixel) * 47);
}

.text-50-medium {
    font-size: calc(var(--pixel) * 50);
    font-weight: 500;
}

HTML代码

<div class="squircle-content space-between">
    <div class="container" style="border: solid 3px red;">
        <img src="https://i.imgur.com/EmdfZR8.png" alt="avatar" class="avatar margin-left-30">
        <span class="text-50-medium margin-left-47">Добрый день, <br> nick</span>
    </div>
    <div class="signs-block margin-right-95" style="border: solid 3px black;">
        <img src="https://i.imgur.com/1kqmH74.png" alt="search" class="sign">
        <img src="https://i.imgur.com/lJg7ZyC.png" alt="favourite" class="sign">
        <img src="https://i.imgur.com/kaAOx9b.png" alt="cart" class="sign">
    </div>
</div>

可能的原因及解决方向 #

• 小数像素精度问题：iOS Safari对极小单位的calc计算精度处理和Chrome存在差异，--pixel为0.322222222px，计算后得到的尺寸是带多位小数的像素值，Safari在渲染时可能出现舍入误差，导致布局错位。建议改用rem、vw等相对单位，或放大--pixel的基准值（比如设为1px，其他数值按比例调整），避免小数像素。
• 图片未设置明确尺寸：.sign类仅定义了边框和外边距，未给图片设置宽高。iOS Safari会优先使用图片原始尺寸渲染，而Chrome可能会根据flex容器高度自动缩放，导致.signs-block被撑开，破坏整体布局。需给.sign添加基于--pixel计算的宽高，比如：

  .sign {
      border: solid 3px blue;
      margin-left: calc(var(--pixel) * 50);
      width: calc(var(--pixel) * 53);
      height: calc(var(--pixel) * 53);
      object-fit: contain;
  }
  

• 绝对定位上下文缺失：.squircle-content设置了position: absolute，但未给其父元素添加position: relative，导致其宽度计算脱离正常文档流，iOS Safari的绝对定位宽度逻辑与Chrome不同，可能引发布局偏移。需给父容器添加position: relative。
• Flex前缀属性不完整：虽然添加了-webkit-flex，但align-items: center未添加-webkit-align-items: center，iOS旧版Safari可能需要完整的前缀支持，补充该属性可确保flex布局对齐逻辑一致。

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