title: display inline-block not working on safari
body: <p>is this because of the inline block issue that safari not support ? </p>
  
  <pre class="lang-css prettyprint-override"><code>input[type=search] {
    -webkit-appearance: textfield;
    -webkit-box-sizing: content-box;
    font-family: inherit;
    font-size: 100%;
    border: none;
  }
  
  input::-webkit-search-decoration,
  input::-webkit-search-cancel-button {
    display: none;
  }
  
  #package-search input[type=search] {
    color: transparent;
    display: inline-block;
    width: 80px;
    height: 56px;
    background: #fff url(assets/img/img/icon/search-b.png) no-repeat 30px 18px;
    background-size: 23px auto;
    border-radius: 28px;
    cursor: pointer;
    margin-top: 10px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    transition: all .5s;
    padding-left: 0;
  }
  
  #package-search input[type=search]:hover {
    background-color: pink;
  }
  
  #package-search input[type=search]:focus {
    width: 380px;
    padding-left: 70px;
    padding-right: 20px;
    color: #343434;
    background-color: pink;
    cursor: auto;
  }
  
  #package-search input::-moz-placeholder {
    color: transparent;
  }
  
  #package-search input::-webkit-input-placeholder {
    color: transparent;
  }
  </code></pre>
  
  <p>this button search has transitioned to get more width when we hover or click and it gonna block another div beside that button search icon</p>
  
  <p>but on safari it doesn't block another div, the result that button box when we hover or click, it gonna be behind on that another div</p>
  
  <p>what cause of this ? do I missing something?</p>
  
  <p>look at this issue 
  <a href="https://i.stack.imgur.com/oHg7V.png" rel="nofollow noreferrer">look here and click</a></p>