Why are these buttons rectangular on iPhone, but square on my desktop browser?

Question

I'm trying to make square buttons, but they are wide rectangles on iPhone. Why would that be? I have JS style them:

var btn = document.createElement("button");
btn.setAttribute("id", "paletteColor");
btn.className = "paletteButton"
btn.style.width = '25px';
btn.style.height = 'px';
btn.style.lineHeight = '0px';
btn.style.fontSize = '26px';
btn.style.verticalAlign = 'top';
btn.style.backgroundColor = "#CCCCCC";
var t = document.createTextNode("");
btn.appendChild(t);

document.getElementById("palette").appendChild(btn);

CSS:

.paletteButton {
    display: inline-block;
    border: 1px outset black;
    cursor:pointer;
    -webkit-text-stroke: 1px white;
    -webkit-appearance: none;
}

Then I have an empty div with an id of "palette".

Safari MacOS:

Safari on iOS:

Answer 1

It seems as though IOS Safari is calculating a default padding depending on the declared font size. (tested on IOS 14.4 on iPad)

If we put padding as 0 on left and right then we get a square. Of course this means that if you come to put text in any of the palette entries you may want to put some padding in as well.

Here's the snippet with padding left/right 0.

 var btn = document.createElement("button"); btn.setAttribute("id", "paletteColor"); btn.className = "paletteButton"; btn.style.paddingLeft = '0px'; btn.style.paddingRight = '0px'; btn.style.width = '25px'; btn.style.height = '25px'; btn.style.lineHeight = '0px'; btn.style.fontSize = '26px'; btn.style.verticalAlign = 'top'; btn.style.backgroundColor = "#CCCCCC"; var t = document.createTextNode(""); btn.appendChild(t); document.getElementById("palette").appendChild(btn);

 .paletteButton { display: inline-block; border: 1px outset black; cursor:pointer; -webkit-text-stroke: 1px white; -webkit-appearance: none; }

 <div id="palette"></div>