View Full Version : Buttons and toolbars too tall on desktop Chrome/Safari versus iOS

21 Sep 2011, 9:35 AM
Sencha Touch version tested:


only default ext-all.css

Platform tested against:

iOS 4.3.5 (8L1) (iPad)
Chrome 14.0.835.163 (Windows XP)
Safari 5.0.3 (Windows XP)


Buttons differ in height between desktop Safari/Chrome and iOS. In the browser they are 33 pixels tall (including the bottom highlight), but in iOS they are only 30 pixels tall. Likewise, the toolbars are 47 pixels tall on the browser and 43 pixels tall on iOS.

This isn't a "bug", per se, but I imagine it probably wasn't intended. It makes developing on the desktop make you come up with a slightly different result than you do when you run it on your iOS device.

Similiarly, the native iOS buttons for the iPhone retina display are 60 pixels tall, double the 30 pixels.

To me, it also makes the Back buttons appear a little glitchy on the arrow part in Chrome. But that's probably because I'm used to the Back buttons in iOS.

Test Case:

Trivial toolbar button example:

onReady: function() {
pnl = new Ext.Panel({

dockedItems:{xtype:'toolbar', dock:'top', items:[{text:'Back', ui:'back'}, {text:'Normal'}]}

Screenshot or Video:

In this screenshot you can see the back buttons as they appear in Chrome for the simple test code. The first uses the default CSS and the second the apple.css. The General button is from the iPad Settings screen and the Bookmarks button from the iPad Safari screen. The final Back button is from the same text example, but when viewed on the iPad in Safari.