2015-09-17 15 views
6

Mobil web sitesinin menü geliştirdik translate3d: http://famosos.globo.com/ios 9 mobil safari scale3d dönüşümü ile yanıp sönen bir hata vardır ve

(sayfanın altındaki hamburger ikonuna tıklayın) markaların atlıkarınca kullanarak Onun Swiper 3.0.8, ios 9 safari üzerinde herhangi bir yöne kaydırdığınızda markalar yanıp sönmeye devam ediyor.

Bunun nedeni, dönüşümün translate3d'si olurken transform: scale3d (normal dönüşümle de olur: ölçek) kullandığımdan öğrendim.

Koru-3d ve arkadan görünen görünürlük numaralarını kullanmayı denedim, ancak siz kaydırdığınızda hala yanıp sönüyor.

Bu kod satırında swiper ve scale kodunu ayırmayı denedim: http://codepen.io/guilhermebruzzi/pen/BoKovN ama nedense bu ios'da açılmıyor.

İlgili kod parçaları:

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

Herhangi bir geçici çözüm ios bu yeni sürümünde ölçek ve Swiper kullanmaya devam etmek? Herkes benzer bir sorunu vardı?

Teşekkürler!

+0

codepen tam (sayfanın altındaki hamburger ikonuna tıklayın): http://codepen.io/guilhermebruzzi/full/BoKovN şimdi iphone gösteriyor ve öyle değil her zaman yanıp söner (sağdan sola hızlıca kaydırarak ilk markalar yanıp söner). Bir gpu tahsisi sorunu olabilir mi? –

+0

Cevap değil, ama Diego'nun cevabı benzer bir sorunun çözümüne yardımcı oldu. http://stackoverflow.com/questions/32804106/angularjs-slide-transition-broken-on-safari-ios-9/32856283#32856283 –

cevap

1

İç içe geçmiş katman kompozisyonu ve görünümün boyutlandırılmasıyla ilgili bir hata gibi görünüyor. Bir üst katmana overflow: hidden eklenmesi sorunu çözüyor gibi görünüyor. Performans açısından bakıldığında, her şey aynı (aynı düzenler, boyalar, birleştirme katmanları) davranıyor gibi görünmektedir.

İlgili konular