分类
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。如果有则改掉

由zhuishao

github:https://github.com/zhuishao/

发表评论

电子邮件地址不会被公开。 必填项已用*标注