Padding doesn't seem to be displaying correctly on iOS

问题

I'm using 3 background images to display as icon for a mobile site which appear perfectly fine on my computer (using window sizes and user agents), however, on my iphone the icon is cut off as if the padding isn't high enough.

This is how it appears on desktop ^

However, on mobile it has this effect v

Any ideas what's causing this? the padding, when set to 20%, is enough to display the icon with a few pixels left over in all screen sizes, but even when set to 22% it doesn't display correctly so I'm assuming it's an iOS bug.

I'm using ios7 and safari if that helps!

.icon-ticket
{
    background: url("@{path-img}icons/icon-ticket-2x.png") no-repeat;
}

.icon-players,
.icon-prize,
.icon-ticket
{
    background-size: 40%;
    padding: 22% 0;
}

回答1:

I think this is related to an issue I'm seeing:

What's happening as far as I can tell is that iOS Safari is obscuring the background of the box model with the padding. Same thing happens with the background-color property (see my post linked above).

Seems like a bug. Only workaround at this point is to remove padding for elements with backgrounds.

来源：https://stackoverflow.com/questions/19376129/padding-doesnt-seem-to-be-displaying-correctly-on-ios