CSS vw and height 100% in Safari
This is a known bug with vh
and vw
in Safari 7. You can fix it by setting height: inherit
on the #child
element:
#parent {
width:100%;
height:50vw;
background: red;
}
#child {
width: 100%;
height: inherit;
background: lime;
}
In Safari 8 this bug was fixed and percentage height/width should work fine.
Related videos on Youtube
Ivan Dokov
Web developer since 2006. Linux fan since 2011. SOreadytohelp
Updated on June 04, 2022Comments
-
Ivan Dokov almost 2 years
It's really hard to format a good title of the question, because it cannot be explained with just a few words.
An element with height of 100% and parent with fixed height in
vw
(viewport width) is not actually 100% tall on Safari (Mac Mavericks, not sure about Windows). It's 0.I've prepared a pen with example to demonstrate my issue. With Chrome the inner element has correct height of 100%. With Safari (v7.0.2 (9537.74.9)) the inner element is with 0 height.
Edit: The same bug occurs on iPhone with iOS 7.1