title: Image not appearing in Safari
body: <p>The right hand hero image appears in Chrome &amp; 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.</p>
  
  <p>Demo -- <a href="https://jsfiddle.net/squidraj/5pzng4pe/4/" rel="nofollow noreferrer">https://jsfiddle.net/squidraj/5pzng4pe/4/</a></p>
  
  <p>Any help is highly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="home-login-widget"&gt;
    &lt;div class="login-block"&gt;
      &lt;form method="post" action="#"&gt;
        &lt;input value="" placeholder="Username" id="username" type="text"&gt;
        &lt;input value="" placeholder="Password" id="password" type="password"&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
    &lt;div class="hero-image"&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>