Hacker News Reader

Comment by nickpsecurity | Hacker News Reader

Just loaded the site on mobile. Always first test I do for these things. It's a pile of content, presumably using their framework, but loaded and scrolled FAST. I like that much. :)

View on HN

I had a go as well on my galaxy s5. Scrolling becomes laggy (at a rate of ~3-4 fps) for good few seconds whenever I scroll over an HTML code example. It shouldn't be that big of an issue though, given that this is supposed to be purely a css framework. The performance cost comes from somewhere else. Javascript, maybe?

These other tests are strange given my results. I cleared browser history then reran my test. My config is Chrome browser on Galaxy S4 Active. Site loads up and is usable with something loading in background for a few seconds per address bar slider. It scrolls perfectly with no lag. Only glitch is when my finger hits a box with editable code or whatever where it scrolls within the box. That's an ambiguous situation, though, so I don't count it as a glitch.

Wonder why the results vary so much. Wait a second, I just re-ran the test on the default Android browser. Were you two using it instead of Chrome? It loads slower and lags at a few points in the scrolling. Actually, seems to scroll faster, too, in a way that makes site less usable. Could be a browser, rendering issue if you're not on Chrome.

I tested on mobile as you suggested, and noticed an unwanted horizontal scrolling of about 20 pixels. I assume this is probably a bug to be fixed later.

Here:

https://news.ycombinator.com/item?id=11764257

I tried to replicate your and other commenters experience. I found issues on Android's default browser that didn't exist on my first, Chrome test. Did you use default browser or what browser you on?

My apologies, I didn't see your message on time. I used the default Chrome browser on my OnePlus One running CyanogenOS 13 (Android 6.0). I should have posted this in my first comment itself.

Interestingly, I did not see any horizontal scrolling when I tried in Chrome browser (Mac OSX 10.11.4) in regular user mode. But on toggling device mode (in dev tools), and selecting one of the mobiles - Galaxy S5 or Nexus 6P, the horizontal scrolling started to appear, and it is a lot worse than on my actual android phone.

I haven't yet been able to identify the element that overflows, but the <html> and <body> seems to take default 100% width and are expected to be contained within the browser frame. There is some other rogue element, somewhere nested inside, which is causing this unwanted horizontal scrolling.

I think the horizontal scrolling is happening only in that github.io web page, and probably not a fault with the CSS framework itself. The framework looks nice and small, and a good alternative to the mainstream alternatives.

Probably. See how useful it is? Also, did it load and scroll really fast otherwise?

Yes, it definitely felt faster. The network tab in google chrome indicates a 9.8KB of CSS file, unminified, which is possibly the reason.

Thanks for pointing out this mobile testing methodology. It really helps to evaluate new CSS frameworks, which we see often nowadays.

You're welcome and that's relatively tiny. :) It's actually a variant of an old-school approach of developing on underpowered, older systems to maximize responsiveness. Apps, web sites, databases, whatever. I mean, there's features in modern CPU's that almost everyone has that you can optimize for. Do that for sure but make your baseline efficient even on lowest, common denominator.

Means it will run like a McLaren F1 on the modern stuff with almost no resource requirements. Ironically, it didn't matter all that much on desktops and servers. The new trends of mobile browsers and pay-per-CPU-or-whatever clouds mean it brings more benefit than ever. Especially at scale.

Reply on news.ycombinator.com