Google Chrome 2.0 was released recently. We’re big fans of Chrome. It’s fast, maximizes screen real estate, and, overall, very compatible. When Chrome 1.0 rolled out we found very few incompatibilities with it. Our platform, and applications developed on our platform, looked great on Chrome 1.0 with few or no changes.
Unfortunately Chrome 2.0 rolled out with some significant rendering problems. Actually it looks to us like it might be just one problem, but with wide-ranging repercussions. Essentially a lot of pages get rendered with a lot of missing content – blank tables! For the NetQuarry platform the result was that our Datasheet (a very functional bound data grid) was rendered in Chrome 2.0 as an empty grid. A few icon buttons rendered, but the text content was gone! One day we were on Chrome 1.x and everything was fine, and the next day Chrome 2.0 was pushed out to us (like it or not) and voila!
After quickly verifying that it was a Chrome 2.0-specific problem, we did some Googling. We expected to find lots of people complaining about this and some quick help on a fix or workaround. Surprisingly there didn’t seem to be a widespread uproar. We did find that it was a known problem and that lots of main stream sites were essentially unusable with Chrome 2.0 (http://code.google.com/p/chromium/issues/detail?id=9904). Apparently the list of affected sites includes Facebook, Twitter, WordPress, and even Google Calendar. Unfortunately my search turned up no tips on what to do about it. It seemed to be some kind of clipping problem that was found before Chrome 2.0 was pushed out to general distribution, but not fixed until after that (or in subsequent releases so far). Seeing that the problem was so widespread we decided to wait a few days assuming that Google would push out a fix. A few days later Chrome v2.0.172.31 was pushed out, but lo and behold, the problem persisted.
After a few more days, and customer complaints, we decided that we couldn’t wait. We did some testing on our datasheet and more Googling and found this Chrome issue (http://code.google.com/p/chromium/issues/detail?id=13333) which matched our problem exactly. What’s more it gave us a suitable workaround. Five minutes later we had the fix in test and shortly after that it was checked in and ready for the next build. Here’s our thanks to terrybarthdesign for providing the workaround. In short, Chrome 2.0 does not like the overflow:hidden style on a tr tag. With the overflow hidden the entire table row content is not rendered. The content is there in the HTML and sometimes flashes briefly when the page is first rendered, but it doesn’t render.
The frustrating thing about this was that it was actually pretty hard to find this. We tried Googling on things like “empty table Chrome 2.0â€, “missing data Chromeâ€, “blank grid Chromeâ€, and about every combination of similar keywords that we could think of and it wasn’t until late last night that we stumbled upon the issue report from terrybarthdesign.
There are really two purposes for this post. The first is to hopefully help someone else stumble onto a way to resolve a very significant problem. The second, is to point out that the great thing about a platform like NetQuarry is that we, NetQuarry, spent our time figuring this out – once. Our clients don’t have to worry about it. Well, they had to worry about it until we fixed it of course, but we investigated and determined it was a Chrome bug, we explained what was going on, we experimented, tested, researched, and provided a fix in our platform – and all our clients benefited. Today or tomorrow we’ll be releasing a new version of the platform (which was coming regardless) and it will have this fix. Our clients won’t have to do a thing except install the new platform. They won’t have to change their code one iota.
The NetQuarry platform supports all recent versions of Chrome, Firefox, Safari, Opera, and IE 6, 7, and 8. The platform takes care of all the browser differences with no overhead for our clients. And, when a supported browser releases a new version, NetQuarry makes sure that the platform is completely compatible. Better yet, the platform is engineered to ensure that such breakage rarely occurs. The platform is designed not just for compatibility with the latest version of each browser, but for forward compatibility as well.
Thank you! I had the same problem you did, Googling all over for the problem. Googling for “google chrome empty table” brought me eventually to your article, and taking out overflow:hidden from the appropriate CSS classes has fixed the problem.
We just found the same problem on the iPhone (which is also AppleWebKit-based). Removing the overflow:hidden on the tr fixed it there too.
We’ve gone ahead and removed the overflow:hidden for all browsers now with no ill effect.