变换scale3d和translate3d

变换scale3d和translate3d

本文介绍了ios 9 mobile safari有一个闪烁的错误,变换scale3d和translate3d的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我开发了移动网站的菜单:(点击汉堡图标在页面的底部)

I've developed the menu of the mobile website: http://famosos.globo.com/ (click the burger icon on the bottom of the page)

使用swiper 3.0.8的品牌旋转木马,当你在ios 9 safari上向任何方向滑动时,品牌会一直闪烁。

Its a carousel of brands using swiper 3.0.8, when you swipe to any direction on ios 9 safari the brands keep blinking.

我发现这是因为我使用了transform:scale3d(也适用于正常变换:scale)而swiper的translate3d发生了。

I found out that it's because i use transform: scale3d (also happens with normal transform: scale) while the translate3d of swiper happens.

我尝试过使用保存-3d和背面可视性技巧,但是当你滑动时它仍然会闪烁。

I've tried using preserve-3d and backface-visibility tricks, but it still keeps blinking when you swipe.

我试图隔离此代码中的swiper和scale代码:但由于某种原因在ios上没有打开。

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.

代码的相关部分:

//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上使用scale和swiper?有人有过类似的问题吗?

Any workaround to continue to use scale and swiper on this new version of ios? Anyone had a similar issue?

谢谢! :)

推荐答案

我使用position解决了问题:固定在父级上。

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

闪烁的错误消失了。

移动网站:(点击页面底部的汉堡图标)

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

这篇关于ios 9 mobile safari有一个闪烁的错误,变换scale3d和translate3d的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 21:13