[OPEN-972][3.2] Webkit Button CSS problem

[cnelissen]

I haven't tested this in any other Ext versions, but it is present in 3.2.1.

In all webkit versions (Mobile Safari especially) buttons are showing up slightly distorted. Attached is a few zoomed in screenshots of the buttons in action. As you can see, in the x-btn-tl, x-btn-tc, and x-btn-tr cells the background position of the sprite is off by one pixel, causing the top of the button to look choppy. If we adjust the background position, then the sprite needs to be lengthened by another pixel, or the entire cell needs to get shrunk by one pixel. I was able to throw in some overrides for my needs, which are not exhaustive by any means.


.ext-webkit .x-btn-tl, .ext-webkit .x-btn-tc, .ext-webkit .x-btn-tr, .ext-webkit .x-btn-bl, .ext-webkit .x-btn-bc, .ext-webkit .x-btn-br {
height: 2px;
}
.ext-webkit .x-btn-tr i, .ext-webkit .x-btn-tl i, .ext-webkit .x-btn-br i, .ext-webkit .x-btn-bl i {
height: 2px;
}
.ext-webkit .x-btn-tc {
background-position: 0 -7px;
}
.ext-webkit .x-btn-ml {
background-position: 0 -25px;
}
.ext-webkit .x-btn-mc {
background-position: 0 -1097px;
}
.ext-webkit .x-btn-mr {
background-position: -3px -25px;
}
.ext-webkit .x-btn-bl {
background-position: 0 -4px;
}
.ext-webkit .x-btn-br {
background-position: -3px -4px;
}
.ext-webkit .x-btn-bc {
background-position: 0 -16px;
}
.ext-webkit .x-btn-over .x-btn-tc {
background-position: 0 -10px;
}
.ext-webkit .x-btn-over .x-btn-ml{
background-position: -6px -25px;
}
.ext-webkit .x-btn-over .x-btn-mr{
background-position: -9px -25px;
}
.ext-webkit .x-btn-over .x-btn-mc{
background-position: 0 -2169px;
}
.ext-webkit .x-btn-over .x-btn-bl{
background-position: -6px -4px;
}
.ext-webkit .x-btn-over .x-btn-br{
background-position: -9px -4px;
}
.ext-webkit .x-btn-over .x-btn-bc{
background-position: 0 -19px;
}


This is surely more of a browser bug, but should probably be compensated for nonetheless.

[jayrobinson]

The viewport zooming that occurs in Mobile Safari and desktop WebKit browsers messes with the visible area of background images.

You can compensate for this by leaving some generous blank space in your image sprites. Effectively you'd double the space of adjacent backgrounds in the image file, double the background-position coordinates, and thereby double the size of your image files.