ios 9 mobile safari имеет мигающую ошибку с transform scale3d и translate3d

Я разработал меню мобильного сайта:http://famosos.globo.com/ (щелкните значок бургера в нижней части страницы)

его карусель брендов с помощью swiper 3.0.8, когда вы проводите в любом направлении на iOS 9 safari, бренды продолжают мигать.

я узнал, что это потому, что я использую transform: scale3d (также происходит с обычным transform: scale), в то время как translate3d swiper происходит.

Я пробовал использовать preserve-3d и backface-трюки видимости, но он по-прежнему продолжает мигать, когда вы проводите.

Я попытался изолировать swiper и масштабировать код на этом codepen: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)

любое обходное решение для продолжения использования scale и swiper в этой новой версии ios? У кого-нибудь была аналогичная проблема?

спасибо! :)

2 ответов


Я решил проблему, используя положение: исправлено на родителе.

мигающий жучок исчез.

мобильный веб-сайт:http://famosos.globo.com/ (щелкните значок бургера в нижней части страницы)


похоже, что это ошибка с вложенным составом слоя и размером окна просмотра. Добавление overflow: hidden в Родительском слое, кажется, решает проблему. С точки зрения производительности, все, кажется, ведет себя одинаково (одинаковые макеты, краски, слои, компоновки)