Why does box-sizing: padding-box look different on a mac? - html

Question

#map-search-button {
display: inline;
float: right;
border-style: solid;
border-image: url(https://i.imgur.com/r35pKjB.png) 8 8 8 8;
border-width: 5px 5px 5px 5px;
height: 50px;
width: 125px;
background-color: #00ACC8;
background-clip: padding-box !important;
font-size: 1.5em;
text-align: center;
line-height: 40px;
color: white;
}
<div id="map-search-button">Find us!</div>
On Chrome on Windows, the button looks the way I expected:
But on Chrome on a Mac, the button looks like this:
Why is this? Is there anything in the CSS I can change that would keep the border image solid?

Answer 1

I’d highly recommend creating a rounded button with border-radius rather than trying to implement a border-image. See inline example below.
As for a technical explanation of why yours doesn’t look right, you may want to look into best practices for producing a border-image if you want to further pursue that route. Your Mac may have a Retina display and be improperly scaling your image.
Using border-radius:
body {
font-family: impact, sans-serif;
letter-spacing: .02em;
}
#map-search-button {
width: 125px;
height: 50px;
line-height: 50px;
background-color: #00ACC8;
border: 5px solid #00ACC8;
border-radius: 8px;
font-size: 1.5em;
text-align: center;
color: white;
}
<div id="map-search-button">FIND US!</div>