I've developed the menu of the mobile website: http://famosos.globo.com/ (click the burger icon on the bottom of the page)
Its a carousel of brands using swiper 3.0.8, when you swipe to any direction on ios 9 safari the brands keep blinking.
I found out that it's because i use transform: scale3d (also happens with normal transform: scale) while the translate3d of swiper happens.
I've tried using preserve-3d and backface-visibility tricks, but it still keeps blinking when you swipe.
I've tried to isolate the swiper and scale code on this codepen: http://codepen.io/guilhermebruzzi/pen/BoKovN but for some reason this doesn't open on ios.
Relevant parts of the code:
//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)
Any workaround to continue to use scale and swiper on this new version of ios? Anyone had a similar issue?
Thanks! :)
It seems to be a bug with nested layer composition and sizing of the viewport. Adding
overflow: hidden
in a parent layer seems to solve the problem. From a performance point of view, everything seems to be behaving the same (identical layouts, paints, compositing layers)I solved the problem using position: fixed on the parent.
The blinking bug disappeared.
Mobile website: http://famosos.globo.com/ (click the burger icon on the bottom of the page)