1,https://github.com/weolar/miniblink49/issues/167 https://github.com/weolar/miniblink49/issues/169
修复了这两处flex box和新版chrome显示不一样的问题。第一个问题我更新了整个LayoutFlexibleBox,第二个问题,
只要更新 LayoutBox::computePercentageLogicalHeight这个函数,在里面加入
LayoutUnit stretchedFlexHeight(-1);
if (isFlexItem(*cb))
stretchedFlexHeight = toLayoutFlexibleBox(cb->parent())->childLogicalHeightForPercentageResolution(*cb);
即可。
测试代码:
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="utf-8" />
<title>Centered layout example-Vuetify.js</title>
<link rel="stylesheet" href="common.css" />
</head>
<div class="application--wrap"><main class="v-content" data-booted="true" style="padding: 0px;"><div class="v-content__wrap"><div class="container fluid fill-height">23333</div></div></main></div>
</html>
-----
* {
margin: 0px;
padding: 0px;
}
.application--wrap {
flex: 1 1 auto;
display: flex;
flex-direction: column;
min-height: 100vh;
max-width: 100%;
position: relative;
}
.v-content {
transition: none;
display: flex;
flex: 1 0 auto;
max-width: 100%;
}
.container.fill-height {
align-items: center;
display: flex;
}
.fill-height {
height: 100%;
}
.container {
flex: 1 1 100%;
margin: auto;
padding: 0px;
width: 100%;
}
.v-content__wrap {
flex: 1 1 auto;
max-width: 100%;
position: relative;
}
原因是.fill-height {
height: 100%;
}
这里老版chrome没考虑如果flex item是Percentage的情况。
以后有时间再看下chrome当时的patch是怎么回事