html - IOS safari flex布局bug?

问题描述

问 题

IOS safari下使用flex布局的时候，如果使用display:flex,例如

 html,
    body {
        height: 100%;
        padding: 0;
        margin: 0;
    }
    
    .wrapper {
        display: flex;
        height: 100%;
        flex-direction: column;
    }
    
    .header {
        height: 50px;
        line-height: 50px;
        border-bottom: solid 1px #ccc;
        flex: 0;
    }
    
    .body {
        flex: 1;
    }

    <div class="wrapper">
        <div class="header">
            头部
        </div>
        <div class="body">
            身体
        </div>
    </div>
    <script>
        setTimeout(function() {
            //如果改变了header高度
            document.querySelector('.header').style.paddingTop = '50px'
        }, 300)
    </script>

如果改变了header高度，safari会出现滚动条，就像没有重新进行弹性计算一样。

但使用-webkit-box这种老式的标准并没有出现问题，在桌面各个现代浏览器均没有这种情况发生。

这是个bug吗？还是说我遗漏了什么?

测试环境：ios10

解决方案

在Safari试了下，缩写形式都不会重新计算布局（console中尝试element.style.flex='xxx', 不会生效），不要用缩写的形式

flex: 1;
改成
flex-grow: 1; 就行了

这篇关于html - IOS safari flex布局bug?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！