月份：2022年11月

分类
CSS

ios兼容性问题收集

文字垂直排版时，设置text-orientation：upright失效

产生原因：因为根据常规思路设置了属性

.x{
   -o-text-orientation: upright;
  -moz-text-orientation: upright;
  -webkit-text-orientation: upright;
  text-orientation: upright;
}

正确的做法

.x{
  -o-text-orientation: upright;
  -moz-text-orientation: upright;
  text-orientation: upright;
  // 增加ios兼容性,这个要放后面，因为ios放前面不没有这个属性了
  -webkit-text-orientation: upright;
}

ios16版本，父容器宽或高为0，子内容是宽高为100%的SVG元素，SVG会完整显示。

ios就是以前的ie…

解决方案：若宽或高为0，则给父元素添加overflow:hidden，隐藏子元素。

阻止ios长按菜单事件

.x{
  -webkit-touch-callout:none;
}

父容器加的border-radius，然后加上overflow：hidden。Swiper-item子元素是图片，没有被裁剪。

加上transform:translateZ(0)使用GPU渲染

GPU渲染的元素突破层叠限制，显示在最上方。

通常的形成一个层叠上下文需要position为非static，并且有z-index不为auto。GPU渲染通常是使用了transform：translateZ

在ios中使用html2canvas页面卡死

看看文字的font-family是否使用了san-self。如果有则改掉