Tab header initial sizing problem in Safari and Chrome

[jay.l.fisher]

The main canvas of our application consists of a TabSet with an icon in each tab header. When this tabset is initially displayed there is not enough room allocated for the icons so the tab titles are cut off. Just moving the mouse over the tab headers causes them to widen to the correct size (before and after images attached). This does not happen on Firefox or IE8, only on Chrome and Safari.

[Isomorphic]

We've seen this, very rarely, seemingly as a consequence of CSS definitions not yet being loaded when components are drawn. It seems to go away as soon as the CSS files are loaded, or if they are loaded from cache. Have you identified a reproducible case?

[jay.l.fisher]

It is consistent in our case. The tabs in question aren't drawn until after the user logs in so I don't think it is a timing issue with the CSS not having been loaded yet. We aren't doing anything with custom CSS.

[Isomorphic]

Are you able to boil this down to a test case - without a way to reproduce it, there's currently no way to even put in a speculative fix.

[robinmacharg]

We saw something similar. In our case we had custom icons on tabs (using HTML with an embedded image) and close icons being drawn outside the tab until a mouseover occured.

Our mistake was not explicitly putting in the custom icon image size. Adding this fixed it. Our guess is that SC was drawing the tab title contents invisibly to size them before the image had loaded.