débordement: caché ne fonctionne pas dans Firefox ou Opera

J'essaie de cacher le débordement sur la barre latérale afin que je puisse produire un bel effet visuel que la page défile & révèle la barre latérale ci-dessous (qui sera la même mais avec différents couleurs de police, images etc.).débordement: caché ne fonctionne pas dans Firefox ou Opera

Cela fonctionne très bien dans Safari & chrome mais pas dans Firefox ou Opera ... la barre latérale supérieure ne se cache pas et se trouve au-dessus du contenu de la barre latérale ci-dessous.

J'ai fait des recherches approfondies, mais les réponses ne se rapportent pas à ce que j'essaie d'atteindre. Semble probable que le problème peut être dû à un débordement: caché ne jouant pas bien avec la position: fixe. Est-ce que je manque quelque chose de vraiment évident, y a-t-il une solution de contournement?

code ci-dessous:

div#latest { 
 
    background: #1a1a19; 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    overflow: hidden!important; 
 
    ; 
 
    z-index: 2 
 
} 
 
div#latest div#latestslides { 
 
    position: relative; 
 
    top: 0; 
 
    left: 0; 
 
    width: 100%; 
 
    height: 100% 
 
} 
 
div#latest div#latestslides div.slide { 
 
    width: 100%; 
 
    height: 100vh; 
 
    background-size: cover; 
 
    background-position: center; 
 
    position: relative; 
 
    opacity: 1; 
 
} 
 
/* sidebar */ 
 

 
div.sidebar { 
 
    width: 350px; 
 
    height: 100%; 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    overflow: hidden!important; 
 
    z-index: 1; 
 
} 
 
.content { 
 
    background-color: #FC0; 
 
}

<body> 
 

 
    <!-- Main --> 
 
    <div id="main"> 
 

 
    <!-- Start latest --> 
 
    <div id="latest"> 
 

 
     <div class="sidebar"> 
 
     <div class="nav" id=""> 
 
      <div class="sections" style="color:pink"> 
 
      <p>THE CONTENT ABOVE</p> 
 
      <p>THE CONTENT ABOVE</p> 
 
      <p>THE CONTENT ABOVE</p> 
 
      <p>THE CONTENT ABOVE</p> 
 
      <p>THE CONTENT ABOVE</p> 
 
      <p>THE CONTENT ABOVE</p> 
 
      </div> 
 
     </div> 
 
     </div> 
 

 

 
     <div id="latestslides" style="background-color:black"> 
 
     <div class="slide" style="background-image:url(images/banner.jpg);"></div> 
 
     <div class="slide" style="background-image:url(images/banner.jpg);"></div> 
 
     </div> 
 

 
    </div> 
 
    <!-- End latest --> 
 

 

 
    <!-- Start B Sidebar --> 
 
    <div class="sidebar"> 
 
     <div class="nav" id=""> 
 
     <div class="sections" style="color:orange"> 
 
      <p>THE CONTENT BELOW</p> 
 
      <p>THE CONTENT BELOW</p> 
 
      <p>THE CONTENT BELOW</p> 
 
      <p>THE CONTENT BELOW</p> 
 
      <p>THE CONTENT BELOW</p> 
 
      <p>THE CONTENT BELOW</p> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- End B sidebar --> 
 

 

 
    
 
    <!-- Portfolio--> 
 
    <section id="portfolio" style="margin-left:350px;"> 
 
     <div class="container"> 
 

 
     <header> 
 
      <h2>content</h2> 
 
     </header> 
 

 
     <p style="font-size:28px; line-height:30px;">Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit 
 
      lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc nibh morbi quis 
 
      fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam vivamus eget. Nunc 
 
      nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum fermentum etiam 
 
      vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. Vitae natoque dictum etiam semper magnis enim feugiat convallis convallis egestas rhoncus ridiculus in quis risus amet curabitur tempor orci penatibus. Tellus erat mauris ipsum 
 
      fermentum etiam vivamus eget. Nunc nibh morbi quis fusce hendrerit lacus ridiculus. 
 

 
     </p> 
 

 
     </div> 
 

 
    </section> 
 

 

 

 

 
    </div><!-- End Main --> 
 

 

 

 

 
</body>

Safari - the sidebar containing 'content above' is hidden on scroll showing the content below

Firefox - the sidebar containing content above is not hidden on scroll and overlays the content below

Source

2015-10-20 David Brookes

S'il vous plaît inclure un exemple de code peu reproductible de votre problème dans la question elle-même plutôt que de lier à un site externe. Sinon, votre question risque d'être fermée. – TylerH

Désolé à ce sujet - je l'ai mis à jour! @TylerH –

Je ne vois aucune différence dans l'extrait entre les navigateurs, ni dans le site derrière le lien d'origine. –

Votre barre latérale a une position fixe, il faut sortir du flux de documents. Ce n'est essentiellement plus un enfant de l'élément avec un débordement caché. Apparemment, les navigateurs gèrent cela différemment.

Vous aurez besoin d'utiliser une structure différente pour limiter le contenu visible, sans éléments fixes ou avec des éléments imbriqués dans votre barre latérale fixe. Vous semblez dupliquer le contenu, donc une approche différente peut être meilleure de toute façon. Regardez dans "sidebars collants" pour des idées.

Source

2015-10-20 19:57:06 isherwood

Merci. Voici un lien vers un site où l'effet que je vise fonctionne: www.coolhunting.com @jnui –

Voici une solution que j'ai trouvée sur votre merveilleux site, elle utilise le clip et fonctionne dans tous les principaux navigateurs, même IE8 !!! REMARQUE: sur les périphériques mobiles, l'élément supérieur n'est masqué que lors de la libération par défilement.

body { 
 
    font: 14px arial; 
 
} 
 
.parent-container { 
 
    position: relative; 
 
    width: 300px; 
 
    height: 200px; 
 
} 
 
.parent { 
 
    position: absolute; 
 
    width: 300px; 
 
    height: 200px; 
 
    background-color: yellow; 
 
    clip: rect(0, auto, auto, 0); 
 
} 
 
.child { 
 
    position: fixed; 
 
    top: 50px; 
 
    left: 50px; 
 
    padding: 1em; 
 
    background-color: red; 
 
} 
 
.child.pink { 
 
    background-color: pink; 
 
}

<div class="child pink">Fixed positioned element</div> 
 

 
<div class="parent-container"> 
 
    <div class="parent"> 
 
    <div class="child red">Fixed positioned element</div> 
 
    </div> 
 
</div> 
 

 
<h1>Workaround to clip fixed positioned element to parent</h1> 
 

 
<p>For more details see <a href="http://stackoverflow.com/a/23859719/328272">our answer</a> at StackOverflow's question "<a href="http://stackoverflow.com/a/23859719">parent &amp; child with position fixed, parent overflow:hidden bug</a>".</p> 
 

 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p> 
 
<p>Dummy text to cause scrollbars</p>

Source

2015-10-21 09:44:35

débordement: caché ne fonctionne pas dans Firefox ou Opera

Répondre

Questions connexes