Bootstrap 3多项目carousel轮播滑动时文字模糊失真如何解决

问题根因 #

• 你当前使用left属性控制轮播滑动，left属于布局属性，每次变更都会触发页面重排，浏览器为了保证滑动帧率会临时降低文字的渲染精度，最终出现颗粒感模糊
• 现有代码中transition属性重复定义，all过渡规则覆盖了left过渡，额外增加了不必要的渲染开销
• 3D变换相关的规则配置不合理，影响了字体亚像素渲染效果

修复步骤 #

1. 替换left过渡为transform过渡，transform属于合成属性，仅触发重绘不触发重排，浏览器不会降低渲染精度
2. 添加字体渲染优化配置，强制开启抗锯齿、保留亚像素渲染能力
3. 清理冗余规则，修正拼写错误的类名

修改后的完整CSS代码 #

.multi-item-carousel{
  .carousel-inner{
    > .item{
      transition: 500ms ease-in-out transform;
      /* 开启字体抗锯齿 */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      /* 强制GPU渲染时保留亚像素精度 */
      transform: translate3d(0,0,0);
      -webkit-perspective: 1000;
      perspective: 1000;
      backface-visibility: hidden;
    }
    .active{
      &.left{
        transform: translateX(-33%);
      }
      &.right{
        transform: translateX(33%);
      }
    }
    .next{
      transform: translateX(33%);
    }
    .prev{
      transform: translateX(-33%);
    }
    @media all and (transform-3d), (-webkit-transform-3d) {
      > .item{
        transition: 500ms ease-in-out transform;
      }
    }
  }
  /* 修正原代码拼写错误的类名carouse-control为carousel-control */
  .carousel-control{
    &.left, &.right{
      background-image: none;
    }
  }
}

// 非相关样式保持不变
body{
  background: #fff;
  color: #000;
  font-size: 26px;
  /* 全局开启字体抗锯齿可选 */
  -webkit-font-smoothing: antialiased;
}
h1{
  color: white;
  font-size: 2.25em;
  text-align: center;
  margin-top: 1em;
  margin-bottom: 2em;
  text-shadow: 0px 2px 0px rgba(0, 0, 0, 1);
}

可选优化 #

如果仍存在轻微模糊，可给轮播项容器添加outline: 1px solid transparent，避免浏览器半像素定位导致的模糊；同时不要给轮播项设置奇数宽高，避免像素对齐问题。

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