SVG黑科技排版教程 | 左右滑动“竟然”存在bug问题？

SVG黑科技排版左右滑动图片是比较常见的排版效果，这个效果技术实现也比较简单，一般来说也不存在兼容问题。

懂点君开发SVG排版时，研究测试发现左右滑动图片在安卓手机上存在一个问题，而且这个问题非常隐蔽，正常来说极少人能够发现，那我们在“堵车的路上”来看看到底是什么兼容问题？

查看案例

点击查看案例，分别在iOS手机和Android手机查看SVG排版效果，要多次关闭图文然后再打开图文，看看左右滑动图片有没有存在兼容问题。

<section style="display: flex;overflow: scroll hidden;width: 100%!important;scroll-snap-type: x mandatory;scroll-behavior: smooth;pointer-events: painted;">
    <!-- 01 -->
    <section style="flex: 0 0 auto;width: 100%;scroll-snap-align: center;scroll-snap-stop: always;">
        <svg viewBox="0 0 1080 1600" style="display: block;background: url(图片链接) 0 0 / 100% auto no-repeat;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君"></svg>
    </section>
    <!-- 02 -->
    <section style="flex: 0 0 auto;width: 100%;scroll-snap-align: center;scroll-snap-stop: always;">
        <svg viewBox="0 0 1080 1600" style="display: block;background: url(图片链接) 0 0 / 100% auto no-repeat;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君"></svg>
    </section>
    <!-- 03 -->
    <section style="flex: 0 0 auto;width: 100%;scroll-snap-align: center;scroll-snap-stop: always;">
        <svg viewBox="0 0 1080 1600" style="display: block;background: url(图片链接) 0 0 / 100% auto no-repeat;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君"></svg>
    </section>
    <!-- 04 -->
    <section style="flex: 0 0 auto;width: 100%;scroll-snap-align: center;scroll-snap-stop: always;">
        <svg viewBox="0 0 1080 1600" style="display: block;background: url(图片链接) 0 0 / 100% auto no-repeat;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君"></svg>
    </section>
</section>

发现问题

认真细心可爱的友友们，是不是发现了兼容问题，在安卓手机上打开图文，左右滑动的图片顺序随机出现，而不是始终显示第一张图片。如果没有发现兼容问题的，我们来看下面这个视频，我详细说明了这个bug问题。

SVG黑科技排版教程 左右滑动“竟然”存在bug问题

解决问题

点击查看案例，SVG排版左右滑动图片实现的方法也比较多，懂点君找到了一种比较可靠的方法，能够很好的解决安卓手机上出现的兼容bug问题，核心代码如下：

<section style="overflow-x: scroll;overflow-y: hidden;scroll-snap-type: x mandatory;pointer-events: painted;">
    <svg viewBox="0 0 4320 1600" width="400%" style="display: block;max-width: none !important;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君">
        <foreignObject x="0" y="0" width="1080" height="1600" style="scroll-snap-align: center;">
            <svg viewBox="0 0 1080 1600" style="display: block;width: 100%;margin-top: -1px;background: url(图片链接) 0 0 / 100% 100% no-repeat;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君"></svg>
        </foreignObject>
        <foreignObject x="1080" y="0" width="1080" height="1600" style="scroll-snap-align: center;">
            <svg viewBox="0 0 1080 1600" style="display: block;width: 100%;margin-top: -1px;background: url(图片链接) 0 0 / 100% 100% no-repeat;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君"></svg>
        </foreignObject>
        <foreignObject x="2160" y="0" width="1080" height="1600" style="scroll-snap-align: center;">
            <svg viewBox="0 0 1080 1600" style="display: block;width: 100%;margin-top: -1px;background: url(图片链接) 0 0 / 100% 100% no-repeat;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君"></svg>
        </foreignObject>
        <foreignObject x="3240" y="0" width="1080" height="1600" style="scroll-snap-align: center;">
            <svg viewBox="0 0 1080 1600" style="display: block;width: 100%;margin-top: -1px;background: url(图片链接) 0 0 / 100% 100% no-repeat;author: dong_dian_jun;pointer-events: none;-webkit-user-select: none;user-select: none;-webkit-tap-highlight-color: transparent;" powered-by="懂点君"></svg>
        </foreignObject>
    </svg>
</section>