IOS 9移动Safari浏览器与转换scale3d闪烁的错误和translate3d

我已经开发了移动网站的菜单：它的品牌转盘使用http://famosos.globo.com/（点击页面底部的汉堡图标）IOS 9移动Safari浏览器与转换scale3d闪烁的错误和translate3d

swiper 3.0.8，当你在ios 9 safari上滑动任何方向时，品牌都会闪烁。

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

我试过使用保存-3d和背面可见性技巧，但它仍然保持闪烁，当你滑动。

我试图隔离此codepen上的swiper和scale code：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上的这个新版本？任何人都有类似的问题？

谢谢！ :)

来源

2015-09-17 Guilherme Heynemann Bruzzi

的codepen全：http://codepen.io/guilhermebruzzi/full/BoKovN现在显示在iPhone和它不一直眨眼（慢慢地从右向左滑动，第一个品牌闪烁）。它可能是一个GPU分配问题？ –

不是一个答案，但迭戈的答案帮助解决了类似的问题。 http://stackoverflow.com/questions/32804106/angularjs-slide-transition-broken-on-safari-ios-9/32856283#32856283 –

我使用position：fixed来解决问题。

闪烁的问题消失了。

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

来源

2015-10-08 17:37:49

你是个巫师哈利 – neaumusic

它似乎是嵌套图层组成和视口大小的错误。在父层中添加overflow: hidden似乎解决了这个问题。从性能角度来看，一切看起来都是相同的（相同的布局，油漆，合成层）

来源

2015-09-24 22:52:43 Diego

IOS 9移动Safari浏览器与转换scale3d闪烁的错误和translate3d

回答

相关问题