2015-09-17 8 views
6

मैं मोबाइल वेबसाइट के मेनू विकसित की हैं: http://famosos.globo.com/ios 9 मोबाइल सफारी scale3d को बदलने के साथ एक निमिष बग है और translate3d

(पेज के तल पर बर्गर आइकन पर क्लिक करें) इसके ब्रांडों की एक हिंडोला का उपयोग कर स्वाइप 3.0.8, जब आप आईओएस 9 सफारी पर किसी भी दिशा में स्वाइप करते हैं तो ब्रांड झपकी रखते रहते हैं।

मुझे पता चला क्योंकि मैं का उपयोग बदलने कि यह बताया गया है: scale3d (भी साथ सामान्य परिणत होता है: पैमाने), जबकि हिट मारने वाला की translate3d होता है।

मैं की रक्षा-3 डी और backface दृश्यता चाल का उपयोग कर की कोशिश की है, लेकिन यह अभी भी निमिष जब आप स्वाइप रहता है।

मैंने इस कोडपेन पर स्वाइपर और स्केल कोड को अलग करने की कोशिश की है: http://codepen.io/guilhermebruzzi/pen/BoKovN लेकिन किसी कारण से यह आईओएस पर नहीं खुलता है।

कोड के प्रासंगिक भागों:

//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 के इस नए संस्करण पर पैमाने पर और हिट मारने वाला उपयोग करने के लिए जारी रखने के लिए? किसी के पास एक समान समस्या थी?

धन्यवाद! :)

+0

codepen पूर्ण (पेज के तल पर बर्गर आइकन पर क्लिक करें): http://codepen.io/guilhermebruzzi/full/BoKovN अब iphone पर दिखाया जा रहा है और यदि ऐसा नहीं होता हर समय झपकी (धीरे-धीरे बाएं से स्वाइप करके पहले ब्रांड झपकी दे रहे हैं)। क्या यह एक जीपीयू आवंटन मुद्दा हो सकता है? –

+0

कोई जवाब नहीं, लेकिन डिएगो के जवाब ने एक समान प्रश्न को हल करने में मदद की। http://stackoverflow.com/questions/32804106/angularjs-slide-transition-broken-on-safari-ios-9/32856283#32856283 –

उत्तर

2

मैं स्थिति का उपयोग कर समस्या हल हो रहा है।

निमिष बग गायब हो गया।

मोबाइल वेबसाइट: http://famosos.globo.com/

+1

एक जादूगर हैरी उर – neaumusic

1

यह नीडिंत परत संरचना और व्यूपोर्ट के आकार के साथ एक बग हो रहा है। एक पैरेंट परत में overflow: hidden जोड़ना समस्या को हल करने लगता है। माता-पिता पर तय: देखने के एक प्रदर्शन बिंदु से, सब कुछ एक ही (समान लेआउट, पेंट, परतों संयोजन) से व्यवहार किए जाने की

संबंधित मुद्दे