There comes white box with image button only in iPhone browser-CodePudding

I have button.

<div class="row" id="ctrlBar">
  <div class="col-6">
    <div class="text-center">
      <img type="button" class="ctrlBtn" src="img/NextTry.png" onMouseOut="this.src='img/NextTry.png'" onMouseOver="this.src='img/NextTry_hover.png'" id="nextBtn"/>
      </div>
</div>

in Style sheet

.ctrlBtn{
  height:50px;
  max-width:300px;
}

@media only screen and (max-width: 750px) {
  .ctrlBtn{
    height:32px;
    width:252px;
    padding:0px 0px 0px 0px ;
  }

It looks well for browser on PC and android.

However on iPhone it looks like this with white transparent box.

Image file is

650 x 129

Why does this happen??

CodePudding user response：

Try to make button outside of img tag . because <img type="button" is not valid HTML.

  <div class="col-6">
    <div class="text-center">
      <button id="nextBtn">
         <img class="ctrlBtn" src="img/NextTry.png" onMouseOut="this.src='img/NextTry.png'" onMouseOver="this.src='img/NextTry_hover.png'" />
      </button>
      </div>
</div>