CSS vw and height 100% in Safari

Question

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

Answer 1

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;
}

updated pen

In Safari 8 this bug was fixed and percentage height/width should work fine.