Hacker News Reader

Comment by pmontra | Hacker News Reader

HN on Android looks exactly the same in FF, Chrome and the stock browser. I checked right now. Even the zoom behaviour is the same. The only browser that makes the site behave better is Opera with text reflow on zoom enabled. I can't understate how useful that feature is in general and I can't understand why every browser doesn't offer it. It's the reason why I'm using Opera on Android despite using Firefox on the desktop. Another reason I'm not using FF on Android is that it's noticeably slower at rendering the page at the end of a scroll action. It seems that blink is better at that.

I'm adblocking with AdAway on the device I rooted and with Adblock Plus (a local proxy) on the one I didn't root.

You get them on F-Droid.

https://f-droid.org/repository/browse/?fdid=org.adaway https://f-droid.org/repository/browse/?fdid=org.adblockplus....

View on HN

> 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.

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.

Here is what the comments look like on FF for Android: https://i.imgur.com/5e7hIMK.png

Does it look the same on Chrome, with no indentation for comments and replies? I've removed Chrome so I'm unable to test but I thought this was just a bug.

No it looks completely different in Firefox for mobile. There is no way on FF to distinguish which comments are children.

I don't have Chrome on the phone but I have answered here about FF https://news.ycombinator.com/item?id=10880486 Check the parent posts.

opera has always been innovative browser with good features as long back as i can remember(opera on Nokia s60v3 back then). features like great speed dial on mobile n desktop, save for offline, opera turbo mode, syncing bookmarks between desktop n mobile, website overview mode, text reflow.. I have to use addons with other browsers to have these features on chrome or firefox. Opera has a great team. Has poor market share though. They also had good security. Opera wasn't vulnerable to some big ssl bug discovered a couple of years ago. Most other browsers were. They recently switched their rendering engine to webkit though

And ever since that switch it felt like they had fired all their engineers and got lost chasing some kind of design shiny.

I guess i should have seen it coming when they were gushing about their "coast" concept.

they actually did fire about 100 people from the Presto team (previous engine) as they switched to webkit.

well damn, i missed that one...

Yeah. I was a big Opera user (/fan) before that ..

Yea, the slow scrolling on Android is annoying. I believe it's caused by not using the native functionality, which I hope gets fixed soon: https://bugzilla.mozilla.org/show_bug.cgi?id=776030

That bug is not about using the native scrolling infrastructure. I don't see a reason why the native Android functionality would be better than what Gecko already does.

(I wrote the initial version of Firefox for Android's scrolling code.)

Opera is slipping though. Ever since they abandoned their presto lineage and move to a Chrome derivative, they have been busy crapifying their browsers by focusing on shiny over functionality.

Just wish Vivaldi had gone mobile first...

Reply on news.ycombinator.com