5 ms·
> 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 brok
by dmm 11y ago
> 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.
- pmontra 11y agoSolution 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.
- bzbarsky 11y agoOh, 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 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...
- pmontra 11y agoInteresting 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.
- bzbarsky 11y agoThank _you_ for actually digging into the CSS and finding the problem!
- rubberstamp 11y agoThis 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!!
- tripzilch 11y agoquirksmode, table-cells... I don't think the problem here is the browser.
- skarap 11y ago> 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.
- skarap 11y agoA CSS fixing the layout on Firefox based on your solution: https://gist.github.com/skarap/15bf77d63fe596ee55ce https://gist.github.com/skarap/15bf77d63fe596ee55ce . Use Stylish (https://addons.mozilla.org/en-US/firefox/addon/stylish/ https://addons.mozilla.org/en-US/firefox/addon/stylish/) to load it.
- dang 11y agoBravo 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.