ScrollMagic setPin和媒体查询不能一起工作

Question

我遇到困难让我的ScrollMagic项目使用媒体查询行为。当我从场景中移除.setPin时，查询完美地工作，我的元素恰好坐在他们应该的位置。但是，当我将它重新打开时，html将不遵守所列出的媒体查询规则。它只会记住页面呈现时存在的原始“left”属性。

的HTML看起来像这样：

<section class="container-fluid purple" id="scene02"> 
    <img src="img/contact-us-btn.png" class="yellow-btn" data-section="#scene07"> 
    <div class="container scene"> 
     <ul class="tabs activetabs"> 
      <li class="active"><img src="img/icons/section-02-1.png"> 
       <p>Security</p> 
      </li> 
      <li><img src="img/icons/section-02-2.png"> 
       <p>Collaboration</p> 
      </li> 
      <li><img src="img/icons/section-02-3.png"> 
       <p>Connectivity</p> 
      </li> 
     </ul> 
    </div> 
</section> 

的scrollmagic JS是这样的：

// ------------------- 
// SCENE 02 
// ------------------- 
var scene02_TL = new TimelineLite(); 
scene02_TL.to("#scene02 .tabs img", 1, {scale:0.6, ease: Linear.easeNone}); 
scene02_TL.to("#scene02 .tabs p", 1, {scale:1.4, ease: Linear.easeNone}); 
// build scene 
scene_02_main = new ScrollMagic.Scene({triggerElement: "#scene02", duration: 560,offset:800}) 
       .setTween(scene02_TL) 
       .setPin("#scene02 .tabs") 
       .addIndicators({name: "02_1 (duration: 560)"}) // add indicators (requires plugin) 
       .addTo(controller); 

最后，输出的CSS的LESS看起来是这样的：

.tabs { 
    z-index: 17; 

    @media screen and (min-width:1200px) { 
     .setPosition(@scene-02-starty, 220px, 722px); 
     .setDimensions(900px, auto); 
    } 
    @media screen and (min-width:993px) and (max-width:1199px) { 
     .setPosition(@scene-02-starty, 200px, 722px); 
     .setDimensions(770px, auto); 
    } 
    @media screen and (max-width:992px) { 
     .setPosition(@scene-02-starty, 40px , 722px); 
     .setDimensions(676px, auto); 
    } 

} 

正如你所看到的，我甚至硬编码了断点并检查了检查员，他们都在相关ct的地方。我也尝试过各种形式的重置和刷新的..

scene_02_main.refresh(); 
controller.updateScene([scene_02_main]); 
controller.update(true); 

任何意见将不胜感激。

Answer 1

在这个线程收视率最高的答案帮我解决这个问题：

iOS 9 Safari: changing an element to fixed position while scrolling won't paint until scroll stops

我基本上都添加了位置：粘;混合，我改变了我的方法从使用左和顶部定位到使用填充将我的元素放置在全宽度容器中。

.tabs { 
    z-index: 17; 
    .setDimensions(100%, auto); 
    left: 0 !important; 
    right: 0 !important; 
    transform: translate3d(0px,722px,0px); 
    position: -webkit-sticky; 
    position: sticky; 

    @media screen and (min-width:1200px) { 
     padding:0 80px 0 257px; 
    } 
    @media screen and (min-width:993px) and (max-width:1199px) { 
      padding: 0 6px 0 207px; 
    } 
    @media screen and (max-width:992px) { 
      padding: 0 20px; 
    } 

}