View Full Version : [FIXED] Blank icons in tabbar if container has scrollable set to true

1 Apr 2012, 2:34 PM

Ext version tested:

Sencha Touch 2.0.1rc
Browser versions tested against:

N/A (Native Android App)
DOCTYPE tested against:


Any container in another container having a bottom-docked tabbar with the scrollable config value set to true causes the tabbar icons to appear as blank squares in Android 4.0.3. This manifested itself when I was adding a dataview (list) since that overrides the container's scrollable default value of null.
Steps to reproduce the problem:

Create a container with a bottom-docked tabbar. Add a dataview (or any container with scrollable: true.
The result that was expected:

Tabbar icons should appear correctly.
The result that occurs instead:

Blank squares appear.
Test Case:

// Add this to the items of any container with a tabbar having icons
// and deploy to Android 4.0.3 (it will correctly work in a browser).
xtype: 'dataview'

// or even...
xtype: 'container',
scrollable: true // this is what the dataview class does

Screenshot or Video:

Others have posted various screen shots in similar reports.
See this URL for live test case: none
Debugging already done:

No additional debugging as to why this occurs was performed.
Possible fix:

Set scrollable to false when adding a dataview to a tab panel. This must be done to dataview even if they are nested in sub-containers.
Additional CSS used:

Operating System:

Android 4.0.3 (emulator)

2 Apr 2012, 5:37 AM
So something like this?

new Ext.tab.Panel({
fullscreen : true,
tabBar : {
docked : 'bottom'
items : [
xtype : 'container',
title : 'Test',
scrollable : true

2 Apr 2012, 5:58 AM
I'm facing the same problem but I couldn't find a solution (or a work around). The "possible solution" doesn't work. So what is a possible fix?

4 Apr 2012, 1:15 AM
I think the example has to be a little more elaborate to trigger the error:

Ext.define('app.view.Main', {
extend: 'Ext.Panel',

config: {
items: [
xtype: 'tabbar',
docked: 'bottom',
items: [
title: 'Start',
html: 'Start',
iconCls: 'home',
}, {
xtype : 'container',
title : 'Test',
scrollable : true

This is what causes the error in my case. As you see, the items in the tabbar has to have an icon mask with iconCls before the error is visible.

More details can be seen in this parallel case: http://www.sencha.com/forum/showthread.php?182171-Beta-3-Toolbar-Icons-not-rendering-on-Tabbar-in-Android-4.0&p=761940#post761940

4 Apr 2012, 4:10 AM
I'm not seeing why adding the container with scrollable is doing anything to the tabbar. If the icon is a blank square that means the browser doesn't support webkit mask CSS.

4 Apr 2012, 4:20 AM
Me neither, but none the less. :)

The code I submitted should render with this error. The reason I know it works before adding the scrollable component is because in my code, I use a card layout for the main container and have no additional items besides the tab bar. Upon setting first view active, the masks turn from icons to squares.

As for what Google can tell me, nobody has any clue why this stopped working in android 4 (browser 4.0.3 henceforth).

6 Apr 2012, 8:24 AM
same issue when I pack the app for android and let it run on my Nexus Galaxy (ICS). there are 3 views on the tab bar. all of them set to scrollable. result=no icons on the tab bar. when I set the 1. view to scrollable=false, then I get the icons on the tab bar. however switching to another tab will make them disappear. coming back to the 1. tab will make them reappear. the same app works fine on an older HTC Desire with 2.3.1.

7 Apr 2012, 9:21 AM
I am also having the same issue when using a Map on android. I have not confirmed it has to do with the scrollable property but I currently have 5 tabs. When i switch to map all the icons go "missing" to the box shape. When i switch to any other tab they come back.

Again this is on android i am running 2.3.6 and Sencha RC 1. Very frustrating any workarounds???


Jamie Avins
9 Apr 2012, 8:28 AM
Sounds like there's still some issues in 4.0.3 with webkit masks and transforms. We'll see what we can do to work around this issue.

11 Apr 2012, 12:32 PM
I can confirm I have this issue. for me setting scrollable makes the icons go square, fine on android and in the pc browser webkit.
I was thinking of setting an image manually but no joy. I think my css is wrong.

.x-tab .x-button-icon.charty,
.x-button .x-button-icon.x-icon-mask.charty {
/*-webkit-mask-image: url('http://cambs.eu/mobile01/img/charty.png');*/
-webkit-mask-box-image: url('http://cambs.eu/mobile01/img/charty.png');

I feel it has to do with the tabbar sizing ever so slightly as I can see the icon title shimmer a bit. I also isolated the code to the scrollable setting on the view. So removing that and all is well. Just of interest the icons go to blocks mid animation between tabs then on a tab that has no issues all the icons display again.

One other thing to note is that I am having usually to set the width or height as a fixed pixel size for the scroll to work this could cause the tabbar to slightly adjust its own size ? hence the flicker on the texts.

I'm using 2.0.0 gpl version.

12 Apr 2012, 2:29 AM
I confirm that I can reproduce the bug in Dolphin HD on a Samsung Galaxy Tab 10.1 running Android 3.2.

12 Apr 2012, 6:28 AM
Same problem here with Android 4.0.3 on Galaxy S2...

Have three tabs, the first and second are scroll able, the third not. On activate tab 3 icons appears, otherwise not. When set scrollable: true on the third tab no icons appears.

Hope it will fixed soon.


Jamie Avins
12 Apr 2012, 9:25 AM
It seems Google hasn't been interested in fixing webkit masks properly since they broke support for them in Android 3.x. We thought they were fixed in 4.0.3, but apparently as soon as you add a transform to them they break. So we're working on changing to font-face in the near future. We'll get more details on this soon.

18 Apr 2012, 3:18 AM
Hi Jamie any update on this I am seeing my Samsung galaxy nexus with android 4.0.2 the issue. Older androids ok for example

Android 2.2 is Ok (HTC Desire)

Anyone have an idea of a workaround. I am guessing its a massive task to swap in an alternative method to do images depending on the browser in android.
During scaling the issue is present on iphone until the animation stops then it is correctly seen. Nothing too problematic but I am hoping that something can be done before long as we want need to support later devices. Funny that its usually older devices being the issue.

18 Apr 2012, 6:54 AM
Just open http://docs.sencha.com/touch/2-0/touch/examples/production/kitchensink/index.html

A (http://docs.sencha.com/touch/2-0/touch/examples/production/kitchensink/index.html)nd navigate to "User Unterfaxce / Bottom Taps"

On Android 4.03 AND 4.04 the Icons on the Tabs are broken.... :((:((

Jamie Avins
18 Apr 2012, 11:15 AM
So I noticed something strange when looking at this today. After several hours of pounding on this, we believe we have a simple fix. The following CSS should fix the problem on all Androids:

.x-tabbar > * {
z-index: 1;

Please let me know if it works for your applications.

18 Apr 2012, 1:41 PM
thx a lot !

Works fine with Android 4.04

19 Apr 2012, 12:18 AM
Yeah! It really works!


19 Apr 2012, 1:57 AM
It seems to work for me too, many thanks for this obscurity. How did you get to this ? Interested..

19 Apr 2012, 3:43 AM
Yes it works! =D>=D>:D

Jamie Avins
19 Apr 2012, 7:30 AM
It seems to work for me too, many thanks for this obscurity. How did you get to this ? Interested..

I noticed that the Toolbar examples were working, even with transforms on them. So I then figured that unlike the transform issues we had in the past with masks, this had to be fixable. Then it was a matter of finding the differences in CSS between Toolbar and TabBar. That took quite a while and I had to bring in Rob and Jacky because it wasn't any of the usual suspects (position, display, box-shadows, etc.). We still have no idea why it needs z-index and it's accidental that toolbar had this in there from Touch 1.x as the DOM structure has changed and shouldn't need it.

24 Apr 2012, 7:26 AM
Interesting thanks for expanding.

We noticed it break when packaged native using phone gap for android on 4.0

my implementation is in index file
<style> .x-tabbar > * { z-index: 1; }</style>

anyone else notice an issue when going native ?

25 May 2012, 4:30 AM
In my case, the icons are blank in buttons, not in a tabbar, what is the css for fix button icons?


30 May 2012, 7:59 PM
On android the selectfield dropdown arrow is sometimes (usually, actually) a square box.

My fix for the selectfield bug is:

<style> .x-field-select { z-index: 1; }</style>

11 Jun 2012, 4:20 AM
In my case, the icons are blank in buttons, not in a tabbar, what is the css for fix button icons?

Same here, how to fix this issue for buttons with iconMask?

19 Jul 2012, 1:52 AM
Thanks for the easy fix! Have put it in my css file and it works like a charm :)

8 Aug 2012, 6:21 AM
In Sencha Touch 2.1 beta2 it is broken again for Android 4.x devices :">

20 Aug 2012, 11:59 AM
If its still broken in ST 2.1 beta2, check if .x-tabbar-inner css position: static,
for z-index to be set it must be relative or absolute
<style> .x-tabbar > * { z-index: 1; position: relative; }</style>

3 Oct 2012, 2:34 PM
The z-index fix seems to work for buttons outside of a tabbar as well. I've found that giving the container of the image or button the z-index property seems to work. So if I have an image mask or button with image mask in a panel (instead of a tabbar), I give the panel a style of z-index: 1 and it works.

19 Feb 2013, 7:14 AM
Came here to say

THANK YOU!!!!!!!!!!!

Been dealing with this and didnt stumble on this til today. I added the <style> line to my index.html and it fixed my issues on Android. Beautiful. Thanks guys

30 Apr 2015, 1:09 PM
I am on ST 2.0.2

I have put this in index.html

<style> .x-tabbar > * { z-index: 1; position: relative; }</style>

I still gets square brackets in Tab panel. It works fine on Android 4.

Any clue OR work around ??. I have also raised Sencha Ticket (TOUCH-5706).