0

Here is a fixed div inside another fixed div with overflow auto. The child div overflow the parent but should remain visible because it's fixed, right?
The most strange part is that if I remove the content of the parent div so that it is not actually scrollable, then the overflowing div becomes visible...

I got this behaviour with chrome 47 and Safari 9.0.3. On Firefox, the inner div remains fully visible.

Here is the demo http://liveweave.com/c6pFAu

#a {
  background: red;
  position: fixed;
  width: 100px;
  height: 100px;
  overflow: auto;
}
#b {
  background: blue;
  position: fixed;
  width: 100px;
  height: 100px;
  top: 50px;
  left: 50px;
}
<div id="a">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae quaerat facilis et quas laudantium quisquam aliquam ducimus blanditiis
  <div id="b">
  </div>
</div>

So, is that a bug or did I miss some weird spec?

Tom Esterez
  • 21,567
  • 8
  • 39
  • 44
  • 1
    Not sure but a fixed div inside another fixed div isn't really logical. They aren't related to one another just the viewport. – Paulie_D Jan 23 '16 at 08:30
  • 2
    Looks like it is a bug - https://bugs.webkit.org/show_bug.cgi?id=121574 Related http://stackoverflow.com/questions/34906065/setting-overflow-to-hidden-in-parent-div-cuts-off-child-div-in-safari?noredirect=1#comment57548419_34906065 – Paulie_D Jan 23 '16 at 08:45
  • It may be a bug in Firefox. What Webkit is doing is likely the correct one. If you bring out the div b outside the div a, you will get the same results for both browsers (FF and Chrome). [http://liveweave.com/GsT86T](http://liveweave.com/GsT86T) – Mumbo Jumbo Feb 01 '16 at 23:10

0 Answers0