ios 9 移动版 safari 有一个闪烁的错误，转换 scale3d 和 translate3d

Question

我开发了手机网站的菜单：http://famosos.globo.com/（点击页面底部的汉堡图标）

它是使用 swiper 3.0.8 的品牌轮播，当你在 ios 9 safari 上向任何方向滑动时，品牌会一直闪烁。

我发现这是因为我使用了 transform: scale3d（也发生在普通的 transform: scale 上），而 translate3d 发生了 swiper。

我试过使用 preserve-3d 和 backface-visibility 技巧，但是当你滑动时它仍然一直闪烁。

我试图隔离此 codepen 上的刷卡器和缩放代码：http://codepen.io/guilhermebruzzi/pen/BoKovN 但由于某些原因，它无法在 ios 上打开。

相关代码部分：

//css
.swiper-slide-active .menu-carousel-link{
    transform: scale3d(1, 1, 1);
}

//html
<div id="carousel" class="swiper-container swiper-container-horizontal">
    <ul class="swiper-wrapper">
      <li class="swiper-slide globocom-slide">
        <a href="http://globo.com/" class="menu-carousel-link">Globo.com</a>
      </li>
      <li class="swiper-slide g1-slide">
        <a href="http://g1.globo.com/" class="menu-carousel-link">G1</a>
      </li>
      <li class="swiper-slide globoesporte-slide">
        <a href="http://globoesporte.globo.com/" class="menu-carousel-link">Globoesporte</a>
      </li>
      <li class="swiper-slide famosos-slide">
        <a href="http://famosos.globo.com/" class="menu-carousel-link">Famosos</a>
      </li>
      <li class="swiper-slide techtudo-slide">
        <a href="http://techtudo.com.br/" class="menu-carousel-link">Techtudo</a>
      </li>
      <li class="swiper-slide gshow-slide">
        <a href="http://gshow.globo.com/" class="menu-carousel-link">Gshow</a>
      </li>
    </ul>
  </div>

// coffeescript
class MenuWebCarousel
  constructor: ->
    @swiperContainer = $("#carousel")
    @swiperOptions = 
      resistanceRatio: 0
      spaceBetween: 10
      centeredSlides: true
      slidesPerView: 'auto'
  initSwiper: ->
    @swiperInstance = new Swiper(@swiperContainer[0], @swiperOptions)

是否有任何解决方法可以继续在此新版本 ios 上使用缩放和滑动条？有人遇到过类似的问题吗？

谢谢！ :)

Answer 1

这似乎是嵌套图层组合和视口大小的错误。在父层中添加 overflow: hidden 似乎可以解决问题。从性能的角度来看，一切似乎都表现相同（相同的布局、绘画、合成层）

Answer 2

我使用 position: fixed on the parent 解决了这个问题。

闪烁的错误消失了。

移动网站：http://famosos.globo.com/（点击页面底部的汉堡图标）

ios 9 移动版 safari 有一个闪烁的错误，转换 scale3d 和 translate3d

ios 9 mobile safari has a blinking bug with transform scale3d and translate3d

javascript

ios

mobile-safari

ios9

swiper