代码之家 › 专栏 › 技术社区 › Bjarne Gerhardt-Pedersen

为什么Ionic 4在iOS 10不支持的情况下使用CSS属性“contain”?

ionic-framework css

Bjarne Gerhardt-Pedersen · 技术社区 · 7 年前

离子4在离子内容上使用css属性“contain”。据我所知,这在iOS 10上是不受支持的,并且在iOS 10上被标记为实验性的 MDN . 在我的iOS 10版本中,它会导致布局异常,例如无法在可滚动内容中滚动到底部。我认为这是原因,因为如果我检查iPhone 5 iOS 10上的运行时构建,则CSS属性“包含”被标记为“不支持”。iPhone6iOS11+版本运行良好。

我对Ionic 4使用此属性感到困惑,因为文档中说支持iOS 10 browser support . 我是否误解了什么,或者可能存在一个变通方法,以便我能够支持iOS 10?

检查离子内容元素时,最后一项显示“包含”属性:

:host {
--background: var(--ion-background-color, #fff);
--color: var(--ion-text-color, #000);
--padding-top: 0px;
--padding-bottom: 0px;
--padding-start: 0px;
--padding-end: 0px;
--keyboard-offset: 0px;
--offset-top: 0px;
--offset-bottom: 0px;
--overflow: auto;
display: block;
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
height: 100%;
margin: 0!important;
padding: 0!important;
font-family: var(--ion-font-family,inherit);
contain: layout size style;