wordpress tag页面,seo是什么简称,太原市建设路小学网站,网站建设柒金手指花总15一、出现场景#xff1a;使用mosowe-swiper#xff1a;适用于uni-app的轮播图插件#xff0c;圆弧无效 ios手机会在transform的时候导致border-radius失效解决方法#xff1a;在使用动画效果带transform的元素的上一级div元素的css加上下面语句#xff1a; transform: rot…一、出现场景使用mosowe-swiper适用于uni-app的轮播图插件圆弧无效 ios手机会在transform的时候导致border-radius失效解决方法在使用动画效果带transform的元素的上一级div元素的css加上下面语句 transform: rotate(0deg);
-webkit-transform: rotate(0deg);二、场景分析 ios中使用border-radius导致overflow:hidden出现失效问题,如下结构: div classswiper-outboxdiv classswiper-containerdiv classswiper-wrapperdiv classswiper-slide v-for(item,index) in items v-bind:keyindeximg v-bind:srcitem.address alt //div/div/div
/div三.解决过程
通常情况下把overflow: hidden; border-radius: 20px;设置在图片的父级,即.swiper-slide上即可解决问题.但有些情况无法将属性设置在父级或设置在父级会出现结果不符合预期,如下:
当轮播图中,将属性设置在父级,每个图片都有border-radius,这样显得不美观. 该问题出现主要是因为ios中使用transform导致,可在期望设置overflow: hidden; border-radius: 20px;的元素上(当前例子即.swiper-outbox)设置transform: rotate(0deg)即可解决该问题.
border-radius: 20px;
// 兼容ios的圆角问题
transform: rotate(0deg);
-webkit-transform: rotate(0deg);
overflow: hidden;
