小程序-swiper + borderRadius + overflow失效问题（轮播图案例）

问题重现

const imgList = [
	"https://XXXXXX1.png",
	"https://XXXXXX2.png"
]
<div className="container">
	<Swiper autoplay circular style={{ width: 140 }}>
		{imgList.map((item, index) => (
			<SwiperItem key={index}>
				<Image className="image" src={item} />
			</SwiperItem>
		))}
	</Swiper>
</div>

.container {
	width: 100%;
	border-radius: 8px;
}
.image {
	width: 100%;
	height: 100%;
}

问题1：圆角设置无效

这种情况下，遇到了第一个问题，圆角设置失败

解决办法：给container元素添加overflow: hidden 和 transform: translateY(0)，我这边只加overflow就好了
问题原因：微信webview的渲染问题，至今未修复

问题2：ios圆角设置无效

没有结束！！！
上面的写法对于安卓和模拟器来说是可以完美展示的，ios上展示就有问题了，圆角不生效

解决办法：

• 给父元素添加height: auto即可，亲测有效
• 给父元素添加position: fixed | relative（没有试验过）
• 给父元素添加backface-visibility: hidden + transform: translate3d(0, 0, 0)（没有试验过）

问题原因：由于不同内核导致的，ios内核只要子元素使用了transform属性，子元素的overflow:hidden就会失效，而swiper的滑动效果正好使用了transform属性