缘起
近期要实现一个收藏小区的功能。发现 swiper 的容器(swiper-container
样式)带有 position: relactive;
样式,则在其内新建一个子元素,定义 position: absolute; right: 0.5rem; bottom:0.5rem;
则其自动位于 图片框的右下角了,如下所示:
div布局如下(container容器元素包含:wrapper、pagination、collect 子元素):
然而, 后来发现,该样式在 Android机上面是好的。 在ios系统下,会有以下问题:
滑动图片时, 收藏框才显示,否则收藏框不显示。。。
性空
后来发现, 图片滑动时, swiper-wrapper
会有 tansform: tanslate3d(-xxx, 0, 0)
的样式变化, 我自定义的收藏div在滑动时显示,静态时隐藏,但是 左下角的分页信息能一直显示。 后来通过观察 swiper 插件的分页样式,发现有个 tansform: tanslate3d(0,0,0);
的样式:
于是进行如下设想:
图片滑动切换时,通过 tansform: tanslate3d(-xxx, 0, 0)
来改变形状, 进而影响了兄弟元素的排版, 那么通过给兄弟元素设置 tansform: tanslate3d(0,0,0);
, 则可以使兄弟元素不受图片滑动带来形状改变的影响, 那么给 收藏框设置
tansform: tanslate3d(0,0,0);
样式,是不是可以解决ios系统下,图片不滑动时,收藏框不显示的问题呢?
结果显而易见。。。