Image not appearing in Safari

Question

The right hand hero image appears in Chrome & FF but not in Safari(windows). I guess it's something to do with flex thing. I used -webkit- as prefix but still not showing up.

Demo -- https://jsfiddle.net/squidraj/5pzng4pe/4/

Any help is highly appreciated.

.home-login-widget {
  display: flex;
  display: -webkit-flex;
  width: 100%;
}
#content-home .login-block h1 {
  clear: left;
  color: #fff;
  float: left;
  font-family: georgia;
  font-size: 2em;
  font-style: italic;
  font-weight: normal;
  line-height: 1.2em;
  padding: 1rem 0 0 !important;
  text-align: left;
  width: 100%;
}
.login-block input#username {
  background: #2b2e30 url("images/login_input_username_bg.jpg") no-repeat scroll left top / 275px 41px;
}
.login-block input#password {
  background: #2b2e30 url("images/login_input_pwd_bg.jpg") no-repeat scroll left top / 275px 41px;
}
.login-block input {
  border: medium none;
  box-sizing: border-box;
  color: #9c9b9b;
  display: block;
  font-size: 14px;
  height: 41px !important;
  margin-bottom: 20px;
  padding: 0 20px 0 50px;
  width: 100%;
}
.login-block {
  display: block;
  float: left;
  padding: 2rem;
  width: 33.3%;
  background: #323537;
}
.hero-image {
  position: relative;
  text-align: right;
  flex-grow: 1;
  webkit-flex-grow: 1;
  background: url('https://s28.postimg.org/5hpjjor59/hero.png') top center no-repeat;
  background-size: cover;
}
img {
  height: 100%;
}
.hero-image h2 {
  background: #ff2bff none repeat scroll 0 0;
  color: #fff;
  left: 0;
  margin: 0 auto;
  padding: 1rem 2rem;
  position: absolute;
  right: 0;
  text-align: center;
  top: 8rem;
  width: 200px;
}
#content-home .login-block h1 {
  clear: left;
  color: #fff;
  float: left;
  font-family: georgia;
  font-size: 2em;
  font-style: italic;
  font-weight: normal;
  line-height: 1.2em;
  padding: 1rem 0 0 !important;
  text-align: left;
  width: 100%;
}
#content-home h1 {
  clear: left;
  color: #444c4c;
  float: left;
  font-family: "Times New Roman", Times, serif;
  font-size: 2em;
  font-style: italic;
  font-weight: normal;
  line-height: 1.3em;
  padding: 0 0 46px !important;
  text-align: center;
  width: 205px;
}
.login-block,
.hero-image {
  box-sizing: border-box;
}

<div class="home-login-widget">
  <div class="login-block">
    <form method="post" action="#">
      <input value="" placeholder="Username" id="username" type="text">
      <input value="" placeholder="Password" id="password" type="password">
    </form>
  </div>

  <div class="hero-image">
  </div>