Strange CSS rendering on iPhone

Question

I have simple CSS for styling a button: <input class="button" type="submit" value="Join">

...
.header__form-submit .button {
  background: #3371E3;
  border-radius: 0 5px 5px 0;
}
...

@media screen and (max-width: 767px) {
  ...
  .header__form-submit .button {
    width: 100%;
    border-radius: 5px;
  }
}

It renders fine on desktop, on any browser and on mobile preview in Chrome. However, when I open this on an iPhone the button has round corners.

Chrome preview:

iPhone either Chrome or Safari:

Why is this happening? Is there a problem with styling <input /> on iOS?

Thank you

score 1 · Answer 1 · edited Apr 14 '18 at 19:57

1

disable default operating system styling

webkit-appearance: none;

Edit: add this to your css

input {
-webkit-border-radius:0; 
border-radius:0;

}

As well as the above line.

edited Apr 14 '18 at 19:57

Seann

81
1
6

answered Apr 14 '18 at 19:09

yasir jafar

167
1
9

tried that and also without `-webkit`. did not help – Moshe Shmukler Apr 14 '18 at 19:46
1

you can do another thing style a div make that a button in javascript by using document.getElementById("buttonId").addEventListener("click",function(){ console.log("button clicked"); }); – yasir jafar Apr 14 '18 at 19:54
yes, definitely i could put an event handler on a `
`. you are correct about that. i am just wondering what is wrong with `` and why BOTH `Safari` and `Chrome` would do this. – Moshe Shmukler Apr 14 '18 at 19:58

score 0 · Accepted Answer · answered Apr 14 '18 at 20:09

0

The way to go is:

<button class="button" type="submit">Join</button>

answered Apr 14 '18 at 20:09

Moshe Shmukler

1,270
2
21
43

Strange CSS rendering on iPhone

2 Answers2