javascript - iOS 9 Safari móvil tiene un error intermitente con transform scale3d y translate3d

He desarrollado el menú del sitio web móvil: http://famosos.globo.com/ (haz clic en el ícono de hamburguesa en la parte inferior de la página)

Es un carrusel de marcas usando Swiper 3.0.8, cuando deslizas en cualquier dirección en Safari de iOS 9, las marcas siguen parpadeando.

Descubrí que es porque uso transform: scale3d (también sucede con el transform: scale normal) mientras ocurre el translate3d del swiper.

He intentado usar trucos de preserve-3d y backface-visibility, pero todavía sigue parpadeando cuando deslizas.

He intentado aislar el código de swiper y scale en este codepen: http://codepen.io/guilhermebruzzi/pen/BoKovN pero por alguna razón esto no se abre en iOS.

Partes relevantes del código:

//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)

¿Alguna solución para seguir usando scale y swiper en esta nueva versión de iOS? ¿Alguien ha tenido un problema similar?

¡Gracias! :)

Respuesta #1

Resolví el problema usando position: fixed en el elemento padre.

El error parpadeante desapareció.

Sitio web móvil: http://famosos.globo.com/ (haga clic en el ícono de hamburguesa en la parte inferior de la página)

Respuesta #2

Parece ser un error con la composición de capas anidadas y el dimensionamiento del viewport. Agregar overflow: hidden en una capa principal parece resolver el problema. Desde el punto de vista del rendimiento, todo parece comportarse igual (diseños idénticos, pinturas, capas de composición)