I've developed the menu of the mobile website: / (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: 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 globo-slide">
        <a href="/" class="menu-carousel-link">Globo</a>
      </li>
      <li class="swiper-slide g1-slide">
        <a href="/" class="menu-carousel-link">G1</a>
      </li>
      <li class="swiper-slide globoesporte-slide">
        <a href="/" class="menu-carousel-link">Globoesporte</a>
      </li>
      <li class="swiper-slide famosos-slide">
        <a href="/" class="menu-carousel-link">Famosos</a>
      </li>
      <li class="swiper-slide techtudo-slide">
        <a href="/" class="menu-carousel-link">Techtudo</a>
      </li>
      <li class="swiper-slide gshow-slide">
        <a href="/" 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! :)

I've developed the menu of the mobile website: http://famosos.globo./ (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 globo-slide">
        <a href="http://globo./" class="menu-carousel-link">Globo.</a>
      </li>
      <li class="swiper-slide g1-slide">
        <a href="http://g1.globo./" class="menu-carousel-link">G1</a>
      </li>
      <li class="swiper-slide globoesporte-slide">
        <a href="http://globoesporte.globo./" class="menu-carousel-link">Globoesporte</a>
      </li>
      <li class="swiper-slide famosos-slide">
        <a href="http://famosos.globo./" class="menu-carousel-link">Famosos</a>
      </li>
      <li class="swiper-slide techtudo-slide">
        <a href="http://techtudo..br/" class="menu-carousel-link">Techtudo</a>
      </li>
      <li class="swiper-slide gshow-slide">
        <a href="http://gshow.globo./" 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! :)

• javascript
• ios
• mobile-safari
• ios9
• swiper.js

• the codepen full: codepen.io/guilhermebruzzi/full/BoKovN is now showing on iphone and it doesn't blink all the time (by swiping from right to left slowly the first brands are blinking). Can it be a gpu allocation issue? – Guilherme D Heynemann Bruzzi Commented Sep 17, 2015 at 22:12
• Not an answer, but Diego's answer helped solve a similar question. stackoverflow./questions/32804106/… – Carlos Cubas Commented Sep 30, 2015 at 1:25

2 Answers 2

I solved the problem using position: fixed on the parent.

The blinking bug disappeared.

Mobile website: http://famosos.globo./ (click the burger icon on the bottom of the page)

It seems to be a bug with nested layer position 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, positing layers)