Search code examples
javascripthtmlcssinternet-explorerviewport-units

Internet explorer viewport width units error with img tag

So I've made a page intro , in which there are to svg files , one inside which is colored a figure and another out which is only outlined. The figure has an overflow hidden and it has an animation to increase it's width. Something like this:

<div>
    <figure> <img /> </figure> <-- Overflow hidden>
    <img /> <-- Only borders
</div>

It looks good on all browsers but IE And I've been playing with the widths of all the containers but I couldn't make it fit and make it responsive. Any idea ?

(jsFiddle)

$(window).ready(function() {
  $('figure').animate({
    width: "100vw",
  }, 3000, function() {});
});
body {
  background-color: red;
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
}
html {
  height: 100vh;
  width: 100vw;
  padding: 0;
  margin: 0;
}
#loading {
  height: 100%;
  width: 50vw;
}
#loading figure {
  position: absolute;
  overflow: hidden;
  width: 0vw;
  margin: 0;
  padding: 0;
  height: 100%;
}
#loading img {
  width: 50vw;
  position: absolute;
  top: 0;
}
#loading h4 {
  text-align: center;
  color: #fff;
  font-size: 3em;
  font-weight: 300;
  position: absolute;
  top: 25vh;
  width: 50vw;
  z-index: 2;
}
<body>
  <div id="loading">
    <figure>
      <img src="http://imgh.us/test-color.svg">
    </figure>
    <img src="http://imgh.us/test_68.svg">
  </div>
</body>

Solution

  • Add 100% height on #loading img

    #loading img { height: 100%; ... }