iOS端Flexbox响应式标签布局768px断点换行异常问题求助

需求与问题表现 #

• 基于Flexbox实现的响应式标签布局，预期规则如下：
  • 默认状态下4个标签各占25%宽度，横向排列不换行
  • 视口宽度≤768px时，每个标签占50%宽度，两列排布
  • 视口宽度≤650px时，每个标签占100%宽度，单列排布
• 所有非iOS测试环境下布局表现完全符合预期，仅iOS设备在视口宽度恰好为768px时，布局失效，第二个标签意外换行，两列排布错位，不符合设计效果。
• 无iOS端调试经验，暂时无法定位问题根因，需要可落地的修复方案。

现有实现代码 #

HTML结构 #

<section class="row page_link_tabs" role="main">
    <div class="tab">
        <a href="/our-team/" title="About Us">
            <img src="/wp-content/uploads/2020/12/1.-About-Us.png" width="481" height="481" alt="About Us">
            <div class="vertical_gradient"></div>
            <h3>About Us</h3>
        </a>
    </div>
    <div class="tab">
        <a href="/our-partners/" title="Partners">
            <img src="/wp-content/uploads/2020/12/2.-Partners.png" width="481" height="481" alt="Partners">
            <div class="vertical_gradient"></div>
            <h3>Partners</h3>
        </a>
    </div>
    <div class="tab">
        <a href="/case-studies/" title="Case Studies">
            <img src="/wp-content/uploads/2020/12/3.-Case-Studies.png" width="481" height="481" alt="Case Studies">
            <div class="vertical_gradient"></div>
            <h3>Case Studies</h3>
        </a>
    </div>
    <div class="tab">
        <a href="/loyalty-referral-program/" title="Loyalty Referral program">
            <img src="/wp-content/uploads/2020/12/4.-Loyalty-Referral-program.png" width="481" height="481" alt="Loyalty Referral program">
            <div class="vertical_gradient"></div>
            <h3>Loyalty Referral program</h3>
        </a>
    </div>
</section>

现有CSS样式 #

.row {
    clear: both;
    margin: 0 auto;
    *zoom: 1;
}

.page_link_tabs {
    display: flex;
}

.page_link_tabs .tab {
    position: relative;
    margin: 0;
    width: 25%;
}

.page_link_tabs .tab img {
    width: 100%;
}

.page_link_tabs .tab h3 {
    position:absolute;
    left: 2rem;
    bottom: 2rem;
    font-size: 34px;
    font-size: 2.125rem;
    color: #FFFFFF;
    text-transform: uppercase;
}

@media only screen and (max-width: 768px) {
    .page_link_tabs {
        flex-wrap: wrap;
    }
    .page_link_tabs .tab {
        width: 50%;
    }
}

@media only screen and (max-width: 650px) {
    .page_link_tabs .tab {
        width: 100%;
    }
}

问题根因 #

这是iOS Safari（尤其是iOS 11及更早版本）的Flexbox亚像素计算兼容缺陷：

• 系统在处理768px这类视口临界宽度时，会结合设备像素比对渲染宽度做整数取整，导致4个单份占25%宽度的子元素，实际渲染总宽度略大于容器100%的可用宽度；
• 初始Flex容器未明确声明flex-wrap规则，子元素默认开启的flex-shrink:1会触发异常收缩，恰好命中768px媒体查询的换行规则时，就会出现非预期的换行错位。

可落地修复方案 #

按顺序补充修改以下CSS规则即可解决问题：

1. 统一Flex布局作用域内的盒模型规则，消除计算偏差

.page_link_tabs,
.page_link_tabs * {
    box-sizing: border-box;
}

2. 给Flex容器明确初始状态下的换行规则，避免未命中媒体查询时的行为异常

.page_link_tabs {
    display: flex;
    flex-wrap: nowrap; /* 默认状态下禁止换行 */
}

3. 给Flex子元素关闭默认收缩行为，避免iOS的异常宽度计算压缩

.page_link_tabs .tab {
    position: relative;
    margin: 0;
    width: 25%;
    flex-shrink: 0; /* 禁止子元素被Flex布局自动压缩 */
}

4. 调整媒体查询的临界值，避开iOS的精度计算误差
   将原768px媒体查询的宽度阈值从max-width:768px调整为max-width:767.98px，避免视口正好为768px时，两套布局规则同时命中产生的冲突：

@media only screen and (max-width: 767.98px) {
    .page_link_tabs {
        flex-wrap: wrap;
    }
    .page_link_tabs .tab {
        width: 50%;
    }
}

iOS端调试提示：可通过Mac端Safari的「开发」菜单，直接连接已开启网页检查器的iOS设备，实时查看元素的实际渲染宽度、命中的媒体查询规则，快速定位布局计算偏差。

内容的提问来源于stack exchange，提问作者php-b-grader