Safari only - position: fixed child is disabled when parent has position: fixed and overflow: hidden
I only see this problem in Safari (6.1 os x)
When the parent div is set to position: fixed overflow: hidden and the child div is set to position: fixed and part of it overflows the parent, it is clipped.
Check 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?
Thank! - = b = -
+3
source to share