ScrollMagic setPin et les requêtes multimédias ne fonctionnent pas ensemble

Question

J'ai des difficultés à faire en sorte que mon projet ScrollMagic se comporte correctement avec les requêtes média. Lorsque je supprime le .setPin de la scène, les requêtes fonctionnent parfaitement et mes éléments sont exactement là où ils le devraient. Cependant, lorsque je le rallume, le code HTML ne respecte pas les règles de requête de médias telles qu'elles sont définies. Il ne se souvient que de l'attribut "left" ORIGINAL qui existait lors du rendu de la page.

Le code HTML ressemble à ceci:

<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> 

Le scrollmagic JS ressemble à ceci:

// ------------------- 
// 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); 

Et enfin, le MOINS qui sort le css ressemble à ceci:

.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); 
    } 

} 

Comme vous pouvez le voir, j'ai même codé dur les points de rupture et j'ai vérifié dans l'inspecteur, ils tirent tous sur le corre endroits ct. J'ai également essayé différentes formes de réinitialisations et de rafraîchissements.

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

Un conseil serait grandement apprécié.

Answer 1

Le top-rated réponse dans ce fil m'a aidé à résoudre ce problème:

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

I Position essentiellement ajouté: collant; au mélange et j'ai changé mon approche d'utiliser le positionnement gauche et supérieur à l'aide de rembourrage pour positionner mes éléments dans un conteneur pleine largeur.

.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; 
    } 

}