4

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

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126
Ivan Dokov
  • 4,013
  • 6
  • 24
  • 36
  • Which version of Safari? – Frankenscarf Mar 18 '14 at 08:07
  • Version 7.0.2 (9537.74.9) – Ivan Dokov Mar 18 '14 at 08:07
  • Can't test 7.x right now, but have you tried to use min-height? does it still apply as zero? And iOS Mobile Safari doesn't properly support vw/vh: http://caniuse.com/#feat=viewport-units – Samuli Hakoniemi Mar 18 '14 at 08:18
  • Unfortunately, I have no access to Safari at the moment. I have read that WebKit/Blink-based browsers don't apply percentage height to the nested element if the parent element has the height set in vh units. A workaround (from the same source) is to put position:relative on the outer div and position:absolute on the inner. – Frankenscarf Mar 18 '14 at 08:20
  • The relative parent and absolute child really fixed the issue! Please post it as answer and I will accept it. @zvona the issue is with `vmax`, not with `vw` – Ivan Dokov Mar 18 '14 at 08:29
  • @IvanDokov you should do it yourself, since I can't provide exact answer since I can't test it :). – Samuli Hakoniemi Mar 18 '14 at 08:31
  • possible duplicate of [Safari: VH units applied to parent element doesn't allow 100% height in child?](http://stackoverflow.com/questions/24017270/safari-vh-units-applied-to-parent-element-doesnt-allow-100-height-in-child) – Stephan Muller Sep 21 '14 at 16:09

1 Answers1

3

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.

Stephan Muller
  • 27,018
  • 16
  • 85
  • 126