iPad Safari 和 PC 浏览器中的图像渲染问题

Question

Issue:
PC browsers -- expected

iPad rendering

Description:
The above image is the expected result in all PC and Android browsers, but in iPad, it renders in a wrong result as second image.
Here is the codes below, I found if I take off width and height in.close-btn, the image size would be same as expected one except button size is still not correct.
What if I replace button as div, it is in the correct result.
What does iPad do for the button element?
What if I want to keep using button for clearly semantics tag, how can I modify it for iPad?

/** HTML */
    <button class="close-btn">
         <img src="close-btn.png" />
    </button>

/** CSS */
    .close-btn {
      position: absolute;
      right: 20px;
      width: 40px;
      height: 40px;
      border-radius: 20px;
      img{
        width: 23.5px;
        height: 23.5px;
      }
    }

Answer 1

try to use this to your .close-btn

-webkit-appearance: none;

becouse iPad changes the look of buttons and other controls to resemble standard controls.