title: There comes white box with image button only in iPhone browser
body: <p>I have button.</p>
  <pre><code>&lt;div class=&quot;row&quot; id=&quot;ctrlBar&quot;&gt;
    &lt;div class=&quot;col-6&quot;&gt;
      &lt;div class=&quot;text-center&quot;&gt;
        &lt;img type=&quot;button&quot; class=&quot;ctrlBtn&quot; src=&quot;img/NextTry.png&quot; onMouseOut=&quot;this.src='img/NextTry.png'&quot; onMouseOver=&quot;this.src='img/NextTry_hover.png'&quot; id=&quot;nextBtn&quot;/&gt;
        &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>in Style sheet</p>
  <pre><code>.ctrlBtn{
    height:50px;
    max-width:300px;
  }
  
  @media only screen and (max-width: 750px) {
    .ctrlBtn{
      height:32px;
      width:252px;
      padding:0px 0px 0px 0px ;
    }
  </code></pre>
  <p>It looks well for browser on PC and android.</p>
  <p>However on iPhone it looks like this with white transparent box.</p>
  <p><a href="https://i.stack.imgur.com/JCzdL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JCzdL.png" alt="enter image description here" /></a></p>
  <p>Image file is</p>
  <p><a href="https://i.stack.imgur.com/2vg6T.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2vg6T.png" alt="enter image description here" /></a></p>
  <p><code>650 x 129</code></p>
  <p>Why does this happen??</p>