ios 9 Mobile Safari hat einen blinkenden Fehler mit Scale3D verwandeln und translate3d

Question

ich das Menü der mobilen Website entwickelt haben: http://famosos.globo.com/ (klicken Sie auf die Burger-Symbol auf dem unteren Rand der Seite)

Es ist ein Karussell von Marken mit swiper 3.0.8, wenn du in jede richtung auf ios 9 safari wischst, blinken die marken weiter.

Ich fand heraus, dass es ist, weil ich transform: scale3d (passiert auch mit normaler Transformation: Maßstab), während die translate3d von swiper passiert.

Ich habe versucht, mit Preserve-3d und Backface-Sichtbarkeit Tricks, aber es blinkt immer noch, wenn Sie wischen.

Ich habe versucht, den Swiper und Maßstabscode auf diesem Codepen zu isolieren: http://codepen.io/guilhermebruzzi/pen/BoKovN aber aus irgendeinem Grund öffnet dies nicht auf ios.

Relevante Teile des Codes:

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

Jede Abhilfe weiterhin auf diese neue Version von ios Skala und swiper zu benutzen? Jeder hatte ein ähnliches Problem?

Danke! :)

Answer 1

Ich löste das Problem mit position: fixed auf dem Elternteil.

Der blinkende Fehler verschwand.

Mobile-Website: http://famosos.globo.com/ (klicken Sie auf die Burger-Symbol auf dem unteren Rand der Seite)

Answer 2

Es scheint sich um einen Fehler bei der Zusammensetzung und Größe des Ansichtsfensters zu handeln. Hinzufügen von overflow: hidden in einer übergeordneten Schicht scheint das Problem zu lösen. Unter dem Gesichtspunkt der Leistung scheint sich alles gleich zu verhalten (identische Layouts, Farben, zusammengesetzte Ebenen)