3

I'm only seeing this issue in Safari.

When a parent div is set to position:fixed; overflow:hidden;, a child div is set to position:fixed and part of it overflows the parent, it gets cut off.

Check out this jsfiddle in Chrome and Safari to see what I mean: http://jsfiddle.net/y2dg65y7/3/

<div class="wrapper">
    <div class="inner">
        Why is cut off in Safari?       
    </div>
</div>

.wrapper{
    background-color: red;
    width: 200px;
    overflow: hidden;
    height: 400px;
    position: fixed;
}

.inner{
    background-color: silver;
    padding: 20px;
    width: 400px;
    height: 200px;
    position: fixed !important;
    top: 50px;
    left: 40px;
}

Is this a bug in Safari? Any ideas? Workarounds?

John Slegers
  • 45,213
  • 22
  • 199
  • 169
user3812853
  • 31
  • 2
  • i need to set position fixed on both divs btw i cannot change the given code structure. so changing the wrapper to absolute is no solution – user3812853 Jan 20 '16 at 17:03
  • It's not logical to have parent and child **both** `position:fixed`...they will be positioned in relation to tbe viewport *not* each other. – Paulie_D Jan 20 '16 at 17:06
  • thats true but i need both in relation to the viewport ... that is ok. – user3812853 Jan 20 '16 at 17:07
  • Then you will probably have to change the structure...one way or another, – Paulie_D Jan 20 '16 at 17:08
  • i just need the inner not to be cut off by the wrapper, like chrome, firefox and even IE will display just fine only safari cannot render it accurate. and like u said its relative to the viewport so why does it cut something of then ? – user3812853 Jan 20 '16 at 17:09
  • 1
    Have you tried explicitly setting overflow to visible for the child div? – BSMP Jan 20 '16 at 17:09
  • 1
    @BSMP - i tried just now sadly no difference. if u ask me its a serious render bug. the only reason i use fixed is to get the child out of the relation to its wrapper, so that nothing gets cut off. anyone else ? :) tried translate3d and Z also on wrapper and child with no results – user3812853 Jan 20 '16 at 17:14
  • It's in Webkit's Bugzilla as unconfirmed: https://bugs.webkit.org/show_bug.cgi?id=121574 – BSMP Jan 20 '16 at 17:25
  • wasn't this already asked and answered in http://stackoverflow.com/a/12463736 ? – milan Apr 08 '16 at 10:16

0 Answers0