overflow:hidden not working in Firefox or Opera

Question

I'm trying to hide the overflow on the sidebar so that I can produce a nice visual effect as the page scrolls & reveals the sidebar underneath (which will be the same but with different font colours, images etc).

It works fine in Safari & chrome but not in Firefox or Opera... the top sidebar does not hide and sits on top of the sidebar content below.

I've researched this extensively but the answers don't relate to what i'm trying to achieve. Seems likely that the issue may be due to overflow:hidden not playing nicely with position:fixed.

Am I missing something really obvious, is there a workaround?

Code below:

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

Please include a minimally reproducible code example of your problem in the question itself rather than linking to an external site. Otherwise your question risks being closed. — TylerH, Oct 20 '15 at 18:01
I can't see any differences in the snippet between the browsers, nor in the site behind the original link. — Mr Lister, Oct 20 '15 at 18:46
i've added a couple of pictures which should help make it clearer @MrLister — DB_876, Oct 20 '15 at 19:41
I see in all browsers what you see in your "Firefox" picture. Except that the colours are different. (SeaMonkey, Chromium, IE 11, Vivaldi. Can't test Safari.) — Mr Lister, Oct 20 '15 at 20:18

isherwood · Answer 1 · 2015-10-20T20:04:02.493

0

Your sidebar has a fixed position, which takes it out of the document flow. It's essentially no longer a child of the element with hidden overflow. Apparently browsers handle this differently.

You'll need to use a different structure to limit visible content, either without fixed elements or with elements nested inside your fixed sidebar. You seem to be duplicating content, so a different approach may be better anyway. Look into "sticky sidebars" for ideas.

edited Oct 20 '15 at 20:04

answered Oct 20 '15 at 19:57

isherwood

58,414
16
114
157

Thanks. Here is a link to a site where the effect i'm aiming for is working: www.coolhunting.com @jnui – DB_876 Oct 20 '15 at 20:47

score 0 · Answer 2 · answered Oct 21 '15 at 09:44

Here is a solution I have found on your wonderful site, it uses clip and works in all major browsers, even IE8!!! http://jsfiddle.net/lmeurs/jf3t0fmf/

NOTE: On mobile devices the top element is only hidden on scroll release.

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>

overflow:hidden not working in Firefox or Opera

2 Answers2