Tag Archives: webkit

Webkit display:table-cell Problem

Posted on May 4, 2010 by Kelson

I recently tried to retrofit a mobile layout onto an old table-based site using CSS. It was a fairly simple layout: A banner across the top, two columns, and a footer. I figured I’d use CSS to “unwrap” the table and make the sidebar and main content area into full-width sections instead of side-by-side columns.

In theory this should be simple: CSS handles tables by using the display property and assigning it table, table-row and table-cell for the <table>, <tr> and <td> elements. You can assign these properties to other elements and make them act as tables, or you can assign block or inline to these elements and make the table act like a series of paragraphs.

Initial testing worked perfectly in Firefox 3.6 and Opera 10.5x. Internet Explorer 8, as expected, ignored the changes entirely. Chrome, however, did something very strange, and Safari reacted the same way: The banner shrank, and the columns changed from a narrow sidebar to a 50/50 split…making it actually worse for small screens.

Clearly WebKit didn’t like something I was doing. Unfortunately, WebKit powers the exact platforms I was targeting: the iPhone and Android!

I dug around with the developer tools a bit to see if I could figure out what was going on. Was the browser not applying the property? Were the table cells inheriting the “original” property from somewhere else? Did I need to change properties on thead and tbody as well?

What I found was that WebKit did recognize the display:block I had added, but somehow the computed style was reverting to display:table-cell. This only applied to table and td, though. Table rows actually did what I told them to, which was why the result ended up looking bizarre.

If it hadn’t changed anything, I probably would have chalked it up to the capability just not being implemented yet. But since it worked on table rows, but not on cells, I decided to treat it as a bug in WebKit and went looking for the best way to report it. I ended up creating a WebKit Bugzilla account and reporting it as bug 38527.

Check out the testcase in Firefox 3.6 or Opera 10.5 to see what it should look like, then take a look in Chrome 4 or 5 or Safari 4.

Posted in Web Design | Tagged , , , , , , , | 5 Comments

Safari on Windows

Posted on June 11, 2007 by Kelson

Safari LogoWow. I have to admit I was not expecting this at all, but Apple has just announced they’re releasing the Safari web browser for Windows.

Increased consumer choice, of course, is a good thing. The most immediate benefit, though, is that Windows-based web developers (the majority) who haven’t been willing to buy a Mac to test their sites in Safari will be able to do full testing on all four major rendering engines: Trident (IE), Gecko (Mozilla/Firefox/etc.), Webkit (Safari) and Presto (Opera).

Also, there’s some really cool stuff available in recent versions of WebKit that will be great to have available for a wider audience.

Interesting thought: this may be the first browser released since Opera expanded to Linux in ~2000 that is available in the same version on Windows and Mac, but not Linux. Even when Internet Explorer was available for the Mac, it used a different engine than the Windows version did.

I wonder what impact this will have on the development of Swift. Its main claim to fame was porting WebKit to Windows, and it’s been months since their last release.

I also wonder what the status is on re-merging the KHTML and WebKit forks. It’s gotten to the point that Konquerer is only an approximation of Safari, making testing on Linux a little harder than it used to be.

(via Asa Dotzler)

No doubt there’s a 500-comment Slashdot discussion already.

Update: Slashdot’s all over it, and Opera Watch has a thread going as well.

Update 2: I’ve posted my thoughts on the implications for Opera. There’s an update at CSS3.info, where they have previews of upcoming CSS features available in Safari 3.

Update 3: I’ve updated the Alternative Browser Alliance to reflect Safari’s new status. This also solves a nagging doubt I’ve had as to whether the default browser on Mac OS should really be considered “alternative.” On Windows, it definitely is.

Update 4: The Webkit team and Web Standards Project have weighed in. The Windows version of WebKit should be available later today, which will be nice for following progress on issues as it moves from beta toward final version. It turns out there’s a regression and at least the Windows version no longer renders the Acid2 test correctly.

Update 5: The author of Swift says that Swift isn’t going away [edit: the blog has since vanished], and points out that “Swift renders more like a Windows Application, both in the GUI and in WebKit. Safari, looks just like OS X, similar to iTunes 6 and below.” Ever since Apple started porting apps to Windows, I’ve found something odd: A common complaint about third-party Mac software is that it doesn’t look and feel native (one of the big reasons we have Camino as well as Firefox), yet when Apple ports their own apps to Windows, it makes them look exactly the same as they do on Mac OS instead of making them work like native apps. I mentioned this to Katie yesterday and she suggested it might be a case of turnabout being fair play.

Posted in Apple, Browsers, Web | Tagged , , , , | 3 Comments