o ios 9 mobile safari tem um bug piscando com transform scale3d e translate3d
Desenvolvi o menu do site para celular:http://famosos.globo.com/ (clique no ícone do hambúrguer na parte inferior da página)
É um carrossel de marcas usando o swiper 3.0.8. Quando você desliza para qualquer direção no ios 9 safari, as marcas ficam piscando.
Eu descobri que é porque eu uso transform: scale3d (também acontece com o normal transform: scale) enquanto o translate3d do swiper acontece.
Tentei usar os truques preserve-3d e backface-visible, mas ele continua piscando quando você desliza.
Eu tentei isolar o código do swiper e da escala neste codepen:http://codepen.io/guilhermebruzzi/pen/BoKovN mas por algum motivo isso não abre no ios.
Partes relevantes do 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)
Alguma solução alternativa para continuar usando a escala e o swiper nesta nova versão do ios? Alguém teve um problema semelhante?
Obrigado! :)