小程序自定义轮播内嵌movable-view组件再内嵌图片，在IOS上切换图片会闪屏，求解决。

Question

最近开发一个博物馆小程序，详情页需要文物的图片轮播，同时还需要图片支持缩放，所以最开始考虑swiper组件内嵌movable组件再嵌image，但swiper和movable两个组件的滑动手势相冲突，所以自定义了swiper组件，也就是swiper-movable.ttml嵌custom-dragImg.ttml。现在遇到的问题是自定义轮播组件内嵌movable-view组件再内嵌图片，在IOS上切换图片会闪屏。已能确定是css兼容性问题。

swiper-movable.ttml相关标签：

<view class="swiper" style="{{utils.containerSize(screenWidth,screenHeight)}}">
    <view
     bindtouchmove="touchmoveList"
     bindtouchend="touchendList"
     class="swiper-list {{canAnimate?'swiper-animation':''}}"
     style="width: {{imgList.length * 750}}rpx;height: {{screenHeight}}px;left: {{currentPageX}}px;"
            >
          <view
            tt:for="{{imgList}}"
            class="swiper-item"
            style="{{utils.containerSize(screenWidth,screenHeight)}}"
          >
              <custom-dragImg
                tt:if="{{utils.includesKeyword(catchList,current+'-'+index)}}"
                class="custom-dragImg"
                bindstart="touchStartList"
                isClean="{{isClean}}"
                imgInfo="{{item}}"
                imgIndex="{{index}}"
                current="{{currentSwiperIndex}}"
                currentRelicIndex="{{current}}"
                isDetail="{{isDetail}}"
                firstImgHeight="{{firstImgHeight}}"
                relics="{{relicsList[current]}}"
               />
          </view>
    </view>
</view>

swiper-movable.ttml相关样式：

.swiper {
    position: relative;
    transform: translate3d(0px, 0px, 0px);
}
.swiper-list {
    position: absolute;
    top: 0;
    display: flex;
    transform: translate3d(0px, 0px, 0px);
    transition-property: height;
    transition-timing-function: linear;
    transition-duration: 0.2s;
}
.swiper-item {
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    transition: height linear 0.2s;
    box-sizing: content-box;
    margin-left: -1px;
    padding-left: 1px;
    transform: translate3d(0px, 0px, 0px);
}

custom-dragImg.ttml相关标签：

<view
    class="dragImg {{showMovableTransitionClass?'dragImgTransition':''}}"
    bindtouchstart="startTouchContainer"
    bindtap="tapPaint"
    style="{{utils.containerSize(movableAreaWidth,movableContainerHeight)}};{{u      tils.containerBackground(imgInfo.classificationType)}}"
>
    <view
        class="movableContainer {{showMovableTransitionClass?'movableContainerTransition':''}}"
        style="padding-top: {{statusBarHeight}}px;{{utils.containerBackground(imgInfo.classificationType)}}{{utils.containerSize(movableAreaWidth,movableContainerHeight)}}"
    >
        <movable-area
            tt:if="{{showMovable}}"
            bindtouchstart="toStartSwiper"
            data-type="movableArea"
            style="{{utils.containerSize(movableAreaWidth,movableAreaHeight)}}"
            class="movableArea"
            scale-area="{{true}}"
        >
            <movable-view
                bindtouchend="handleTouchEndMovable"
                bindtouchmove="moveMovable"
                scale-value="{{scale}}"
                scale-min="{{0.5}}"
                scale-max="{{scaleMax}}"
                bindchange="{{imgShapeMode === 'high'?'verticalPositionChange':'horizontalPositionChange'}}"
                bindscale="{{imgTypeMode === 'vertical'?'verticalScaleChange':imgTypeMode === 'horizontal'?'horizontalScaleChange':'innerScaleChange'}}"
                x="{{x}}"
                y="{{y}}"
                inertia="{{false}}"
                scale="{{!imgInfo.is3D&&canScale}}"
                out-of-bounds="{{false}}"
                style="{{imgInfo.is3D ? utils.containerSize(movableAreaWidth,movableAreaHeight): utils.containerSize(movableViewWidth,movableViewHeight)}}"
                class="movableView {{showMovableTransitionClass?'movableTransition':''}}"
                direction="{{utils.calcDirection(imgInfo,recordScale,direction,imgTypeMode)}}"
                animation="{{false}}"
            >
                <!-- 沉浸态 -->
                <image
                    hidden="{{isDetail}}"
                    bindload="imgLoaded"
                    binderror="imgLoadError"
                    bindtouchstart="typeTouch"
                    data-touchtype="origin"
                    src="{{imgInfo.url}}"
                />
                <!-- 详情态 -->
                <!-- 细节图也加载高清 -->
                <image
                    hidden="{{!isDetail}}"
                    bindtouchstart="typeTouch"
                    data-touchtype="origin"
                    src="{{imgIndex === 0 ? imgInfo.medium_size_url : imgInfo.url}}"
                />
            </movable-view>
        </movable-area>
    </view>
</view>

custom-dragImg.ttss相关样式：

.dragImg {
    position: relative;
    box-sizing: border-box;
    transform: translate3d(0px, 0px, 0px);
}
.movableContainerTransition {
    transition: height linear 0.2s;
}
.movableArea {
    position: relative;
    transform: translate3d(0, 0, 0) !important;
}
.movableTransition {
    transition: all linear 0.2s;
}
.movableView > image {
    position: relative;
    /* 解决IOS放大后模糊的问题 */
    width: 400%;
    height: 400%;
    transform-origin: left top;
    transform: translate3d(0, 0, 0) scale(0.25, 0.25);
    /* 解决IOS放大后模糊的问题end */
}

运行结果及报错内容：在IOS端切换图片，图片会闪烁，在模拟器、安卓端不会

复现效果：可抖音搜索“河南博物院”（IOS端），点开小程序，点进文物详情页（非有3D资源的文物），在详情态或沉浸态从左到右再从右到左来回切换图片

我的解答思路和尝试过的方法：

1. 在父元素.swiper-list上加overflow: hidden;translate3d(0, 0, 0);在闪动的子元素上加translate3d(0, 0, 0);几乎没有效果
2. 其他图片在当前图片这一屏未显示，可能IOS有性能优化会“懒加载”，所以图片会闪，因此让轮播的每一项子元素溢出到上一张或下一张上。尝试后有效果，但只有当下一张或上一张image覆盖到当前图片这一屏才会不闪，不能单纯只用.swiper-item覆盖，不然也是没效果，但目前不是所有图片宽度都会超出屏幕，所以不能用图片宽度溢出到当前屏幕的方法来解决。参考链接https://www.jianshu.com/p/616...

我想要达到的结果：轮播切换图片在IOS端不闪烁