iosでbuttonの横幅がなぜか意図したサイズにならないとき

こんにちはレターズです。今回もコーディングでちょっとハマるかも！？しれないポイントをお伝えしていきます。

先日、button要素を正円にしたいと思い下記cssを実装

width: 15px;
height: 15px;
border-radius: 50%
background-color: #c7ac8f;
border: none;
margin: 0 5px;

よしよし、上手くいったぞ。と思っていたら、、iosでなぜか楕円形になってしまう。。（下記画像参照）

GoogleChromeとかアンドロイドではちゃんと意図する表示なのに、iosではこうなる問題です。。よくあるやつですね。。

意外とこういう時は簡単な答えだったりするのですが、考えること30分。。。
見つけた答えは下記でした

padding:0; を追加する

ということで、下記が最終的にiosでも正円になったcssです。

    width: 35px;
    height: 15px;
    border-radius: 50%;
    background-color: #c7ac8f;
    border: none;
    margin: 0 5px;
    padding: 0;

まとめ

buttonのpaddingは常に設定するようにすることで、未然に防げるのかもしれません。

とにかく、iosとAndroidはきちんと行き来して確認しないといけないですね。当たり前なのですが、たまに過信が招く事故がありますので、気をつけたいですね。