GlideJS轮播在Chrome中从首张切换到末张时首张幻灯片闪烁问题求助

核心修改点 #

• 修正JS配置项的参数类型，将autoplay、animationDuration的字符串值改为数字类型
• 新增CSS规则强制Chrome将幻灯片提升为独立合成层，避免动画重绘闪烁
• 调整z-index层级规则，覆盖原生节点与克隆节点的层级优先级
• 调整边距设置位置，避免影响Glide内部滑动距离计算
• 删除冗余的背景图相关CSS规则，避免重复资源加载

修改后的代码片段 #

JS代码 #

const initCarousel = () => {
    const slides = document.querySelectorAll('.glide__slide');
    if (slides.length) {
        const sliderConfiguration = {
            gap: 0,
            type: 'carousel',
            autoplay: 1000,
            animationDuration: 500,
            hoverpause: false,
            keyboard: true,
            animationTimingFunc: 'cubic-bezier(0.165, 0.840, 0.440, 1.000)',
            swipeThreshold: 0,
            dragThreshold: false
        };
        const slider = new Glide('.map-banner', sliderConfiguration);
        slider.mount();
    }
}

initCarousel();

CSS代码 #

.section-default {
  height: 100%;
  width: 100%;
  background-color: #f5f5f5;
  padding: 0;
  margin: 0;
  font-family: 'FiraSans';
  font-family: 'Fira Sans', sans-serif;
  font-weight: 400;
  min-width: 320px;
  -webkit-overflow-scrolling:  touch;
  -webkit-text-size-adjust: none;
}

.layout {
    height: 100%;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.layout__content {
   -webkit-flex: 1 0 auto;
    flex: 1 0 auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.mb-p, .mb-sm {
    margin-bottom: 1.5rem;
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    margin-bottom: 0px;
}

.color-common {
    color: #424242;
}
body, html {
    font-family: 'FiraSans';
    font-family: 'Fira Sans', sans-serif;
    font-weight: 400;
    -webkit-text-size-adjust: none;
}

html {
    font-size: 16px;
}

ul {
    list-style-type: none;
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    font-weight: inherit;
    line-height: inherit;
}

.map-banner {
    margin: 1.5rem auto 0;
    width: 79rem;
    cursor: default;
    padding: 0 12px;
}

.glide--swipeable {
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab;
}
.glide {
    position: relative;
    box-sizing: border-box;
}

/* 新增防闪烁规则 */
.glide__slide {
    backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
    -webkit-font-smoothing: subpixel-antialiased;
    z-index: 0;
}
.glide__slide--active,
.glide__slide--clone {
    z-index: 1;
}

.map-banner .glide__slide_narrow {
        padding: 0 1.5rem;
    }

 .map-banner .glide__arrow {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

 .map-banner .glide__arrow_prev {
        left: -5px;
        transform: translateY(-50%) rotate(90deg);
  }

  .map-banner .glide__arrow_next {
        right: -5px;
        transform: translateY(-50%) rotate(270deg);
   }

   .map-banner .glide__arrow-img {
        width: 2rem;
        height: 2rem;
   }

.map-banner .map-banner__transfer {
    img {
        height: 12rem;
    }
}

.slider {
    img {
        width: 100%;
    }
}

.map-banner__main {
    display: flex;
    width: 100%;
    height: 24rem;
}

.glide__track {
  margin: 0;
}

HTML代码无需修改，可沿用原有代码 #

修复原理 #

1. Glide内部时序计算要求autoplay和animationDuration为数字类型，传入字符串会导致首尾切换的衔接时间计算错误，出现短暂空白闪烁。
2. translate3d和backface-visibility: hidden会强制Chrome将幻灯片元素提升为独立的合成层，避免动画过程中触发全域重绘，消除Chrome特有的图层闪烁问题。
3. Glide的无限轮播依赖首尾克隆节点实现，层级规则同时覆盖克隆节点可以避免循环切换时原生节点与克隆节点层级重叠，导致的视觉闪烁。
4. 边距移到父容器后不会影响Glide对滑动轨道尺寸的计算，避免首尾切换时元素位置错位出现闪烁。

内容的提问来源于stack exchange，提问作者Hebmor