图像没有出现在Safari中

Question

右手英雄形象出现在Chrome＆amp; FF但不在Safari（Windows）中。我想这与flex事件有关。我使用-webkit-作为前缀但仍未显示。

演示 - https://jsfiddle.net/squidraj/5pzng4pe/4/

非常感谢任何帮助。

Sub CheckString()
Dim myChar, myText As String
Dim i, charPos As Long

Range("C1").Value = ""

myText = Range("B1").Text

If Len(Range("A1").Text) > Len(Range("B1").Text) Then Exit Sub

For i = 1 To Len(Range("A1"))

    myChar = Mid(Range("A1").Text, i, 1)
    charPos = InStr(1, myText, myChar, vbTextCompare)

    If charPos = 0 Then
        Exit Sub
    Else
        myText = Left(myText, charPos - 1) & Mid(myText, charPos + 1, Len(myText))
    End If
Next i


    Range("C1").Value = "OK"


End Sub

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