緣起

近期要實(shí)現(xiàn)一個收藏小區(qū)的功能。發(fā)現(xiàn) swiper 的容器(swiper-container 樣式)帶有 position: relactive; 樣式，則在其內(nèi)新建一個子元素，定義 position: absolute; right: 0.5rem; bottom:0.5rem; 則其自動位于 圖片框的右下角了，如下所示：

swiper-container

div布局如下（container容器元素包含：wrapper、pagination、collect 子元素）：

.swiper-container>.swiper-wrapper、.swiper-pagination、.collect

然而， 后來發(fā)現(xiàn)，該樣式在 Android機(jī)上面是好的。 在ios系統(tǒng)下，會有以下問題：

滑動圖片時， 收藏框才顯示，否則收藏框不顯示。。。

性空

后來發(fā)現(xiàn)， 圖片滑動時， swiper-wrapper 會有 tansform: tanslate3d(-xxx, 0, 0) 的樣式變化， 我自定義的收藏div在滑動時顯示，靜態(tài)時隱藏，但是 左下角的分頁信息能一直顯示。 后來通過觀察 swiper 插件的分頁樣式，發(fā)現(xiàn)有個 tansform: tanslate3d(0,0,0); 的樣式：

swiper-pagination

于是進(jìn)行如下設(shè)想：

圖片滑動切換時，通過 tansform: tanslate3d(-xxx, 0, 0) 來改變形狀， 進(jìn)而影響了兄弟元素的排版， 那么通過給兄弟元素設(shè)置 tansform: tanslate3d(0,0,0); ， 則可以使兄弟元素不受圖片滑動帶來形狀改變的影響， 那么給 收藏框設(shè)置

 tansform: tanslate3d(0,0,0);

樣式，是不是可以解決ios系統(tǒng)下，圖片不滑動時，收藏框不顯示的問題呢？

結(jié)果顯而易見。。。