Strange behavior of position: absolute; How to decide?

Question

css

There is a project in which there is a search with an icon (magnifying glass),
if it is viewed on android everything is OK, the magnifying glass occupies the position given to it.
A small code, as it is all spelled out:

<div class="header__top-search">
    <div class="search">
    	<form action="" class="search__form">
    	<input type="text" name="search" class="search__input" value="Более 250 наборов" required="" onblur="if(this.value=='') this.value='Более 250 наборов';" onfocus="if(this.value=='Более 250 наборов') this.value='';">
    	<input type="submit" value="" class="search__submit">
    	</form>
    </div>
 </div>

.header__top-search {
  float: left;
  width: 21%;
}
.search {
  position: relative;
}
.search__input {
  padding: 7px 30px 7px 12px;
  background: rgba(255, 255, 255, 0.25);
  border: 0 none;
  color: white;
  font-family: "PT Sans", sans-serif;
  font-size: 13px;
  font-weight: 400;
  outline: none;
  width: 100%;
  border-radius: 14px;
  background-clip: padding-box;
-webkit-appearance: none;
}
ну и иконка:
.search__submit {
  background: url("../img/search.png") 0 0 no-repeat;
  width: 13px;
  height: 13px;
  display: block;
  border: none;
  position: absolute;
  right: 13px;
  top: 50%;
  margin-top: -6.5px;
}

everything is simple and standard.
But if you open it on the iphone, then the magnifier moves to the side.
How can such a glitch be overcome?
UPD And yes, if you set the icon to right: 0; then on the iphone it becomes as it should, but does not press against the edge as it should. On android with right: 0; icon on the right side. Here is such a mystery.

Answer 1

reset.css/normalize.css
I think the problem is in the browser styles.