Hacker News Reader

Comment by dmm | Hacker News Reader

> HN on Android looks exactly the same in FF, Chrome and the stock browser.

I just checked too and Firefox looks different in the comments and it has been broken since the beginning of the mobile changes.

The comments on FF for Android do not have any additional indentation to suggest they are children. On firefox every comment takes the entire width of the screen, even if it's a heavily nested reply. On chrome comments have additional space on the left side indicating if they are children and who they are replying to.

The frontpage looks fine on Firefox. The comments do not look fine. When you view a stories comments on Firefox for android it's impossible to tell what comments are children.

View on HN

Solution found:

> The comments on FF for Android do not have any additional indentation to suggest they are children.

I reinstalled FF on my phone and you're right. On my tablet FF behaves like Chrome. Some media queries gone awries or some FF quirk on smaller screens? FF-desktop behaves like the one on the phone when the window is resized to be narrow so it seems to be consistent with itself.

HN is using a media query to set the indentation using an empty image and setting its width. Check the /news.css file. Each comment is a tr, with 3 td elements. The image is the first one, then the votes arrows and the text. FF arranges those td in vertical, blink keeps them on the same row.

Digging into the CSS I realized that it's because of the display: block at line 88. If I remove it FF indents the comments. Opera keeps looking good.

Oh, that's awesome.

The CSS is clearly setting these to display:block, so they should in fact stack. But the page is also in quirks mode (no doctype), and in quirks mode Chrome (and WebKit) seems to compute the display of <td> to "table-cell" no matter what the styles say.

So yeah, someone just wrote CSS that depends on a bug in Chrome/WebKit and either didn't bother to test in other browsers or doesn't care whether it works there.

Edit: https://code.google.com/p/chromium/issues/detail?id=369979 is the 1.5-year-old bug report on Chrome to remove this unnecessary quirk. Let's see what HN does if/when the Chrome folks fix that one...

Interesting explanation. Thanks.

Btw this could prove my point that people ditch browsers because of bugs of sites, if those sites look good in other browsers.

Thank _you_ for actually digging into the CSS and finding the problem!

This is awesome, as expected from tech crowd. As soon as I got time to look into this, someone else has figured it all out.

Many eyes/brains on the bug means quickly figuring out issues. If it was open source the patch for this would probably be in testing now.

Active and very Awesome community!!

quirksmode, table-cells... I don't think the problem here is the browser.

> Solution found:

Thank you for caring enough to look into this!

Would be absolutely awesome if we could find somebody from HN to fix it.

A CSS fixing the layout on Firefox based on your solution: https://gist.github.com/skarap/15bf77d63fe596ee55ce . Use Stylish (https://addons.mozilla.org/en-US/firefox/addon/stylish/) to load it.

Bravo pmontra! We've rolled that out.

I'm ashamed to say that this fix was on our list for a month and we hadn't gotten to it despite how easy it turned out to be (assuming, at least, that nothing breaks in other browsers). Fortunately HN has excellent users.

Opera Mini in android lost the indentation of comments around two months ago :(

Is it still broken?

It works now, thanks a lot !

I checked the site with FF on my phone and it really works. Maybe I can start using FF there. Thanks for deploying the patch so quickly.

Reply on news.ycombinator.com