# Why is the tutorial section so embarassing?

**URL:** <https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962>\
**Category:** Uncategorized\
**Created:** [March 24, 2018, 11:29am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962 "2018-03-24T11:29:30Z")\
**Posts on this page:** 16\
**Page:** 2

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 26, 2018, 10:40am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/23 "2018-03-26T10:40:28Z")

</div>

> [@fkleuver](#):
>
> I’m on PC and definitely having choppy scrolling

scrolling like mad man  
captured @ 5 fps to save some bandwidth @ full-hd window size  
 ![todo-scroll](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/cadbcc9fc29ffb80a1585baefa0ec5c24d65e4a4.gif)

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 26, 2018, 11:05am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/24 "2018-03-26T11:05:40Z")

</div>

> [@fkleuver](#):
>
> As-is: 5-7 FPS  
> With backface-visibility: hidden: 13-16 FPS

any plugins in chrome?

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 26, 2018, 11:26am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/25 "2018-03-26T11:26:59Z")

</div>

Just for reference:  
some goodness on improving rendering perf  
[https://dev.opera.com/articles/css-will-change-property/](https://dev.opera.com/articles/css-will-change-property/)

---

<div class="post-metadata">

**Author:** ![dwaynecharrington](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dwaynecharrington/32/11_2.png) [@dwaynecharrington](https://discourse.aurelia.io/u/dwaynecharrington)\
**Post date:** [March 26, 2018, 11:37am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/26 "2018-03-26T11:37:36Z")

</div>

The reason for scrolling performance is because `box-shadow`, particularly with a blur radius above 0px, is an expensive paint operation. It is one of the most expensive operations for paint performance, up there with transparency and `border-radius`.

The fix for this is a simple matter of setting the blur radius to 0px and avoiding the use of expensive paint operations such as these. The devices that see these issues the most are lower powered hardware like; old laptops, tablets and mobile phones. You don’t really notice something like `box-shadow` affecting scroll performance on a medium to high-end machine.

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [March 26, 2018, 3:26pm UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/27 "2018-03-26T15:26:58Z")

</div>

Crappy old GPU. I’ve never seen the need for a good GPU on a development machine, so I saved money on that in favor of more cores and RAM. My VMs are important to me, you know 🙂

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [March 26, 2018, 3:39pm UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/28 "2018-03-26T15:39:41Z")

</div>

I intentionally left `will-change` out of the discussion here because there is nothing on this website that would benefit from it. And in the light of “mobile-friendly”, stuff that increases the baseline CPU usage ought to be avoided.

Come on guys, what’s with the elitist attitude regarding older computers? You know how decision-makers are often looking at these things on a craptop or on their phones. And look at the topic you’re saying this in.

There is absolutely no reason why a _documentation_ site shouldn’t have a crisp scrolling and rendering performance even on a 10 year old computer. Don’t be like angular.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 26, 2018, 10:39pm UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/29 "2018-03-26T22:39:19Z")

</div>

Reducing css effect might help on this issue, but doesn’t solve it. Firefox is super smooth in scrolling, it means the hardware can do it.

Based on @fkleuver’s test, even turn off some css effect, only increase the FPS to sub 20, which is way below normal.

I agree that aurelia doc site should work smoothly on old machine. If it doesn’t, the code/css/browser has issue, not the machine displaying it.

My home iMac is 2010 model, I have no interest to replace it. My office Macbook is more powerful, but I like to do thing on my old iMac. Because when my code ran smoothly on the grandpa hardware, I knew it’s efficient and it will work well almost anywhere.

Powerful machine doesn’t mean we can ignore efficiency. After all, we are engineers, efficiency is what we strive for.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 27, 2018, 12:16am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/30 "2018-03-27T00:16:47Z")

</div>

This might be the reason why current Firefox is so damn fast in scrolling.

> **[Off-Main-Thread Painting](https://mozillagfx.wordpress.com/2017/12/05/off-main-thread-painting/)**
>
> I’m excited to announce Off-Main-Thread painting, our new Firefox graphics performance effort! It’s shipping soon in our next release, Firefox 58 – directly on the heels of Advanced Lay…

---

<div class="post-metadata">

**Author:** ![dwaynecharrington](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/dwaynecharrington/32/11_2.png) [@dwaynecharrington](https://discourse.aurelia.io/u/dwaynecharrington)\
**Post date:** [March 27, 2018, 12:22am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/31 "2018-03-27T00:22:13Z")

</div>

I have been doing some benchmarking and I can definitely see Chrome reporting the frame rate dropping to sub 20fps in some instances. The main culprit from what I can see is as expected, the blur radius value on `box-shadow` usage. I can see when I scroll an element with `box-shadow` into view, there is a significant increase in paint cost and the frame rate drops accordingly. Removing the blur radius in a couple of instances where the radius is 40px, results in the lowest frame rate going from 19fps to well above 30fps. I believe there are other factors at hand here, but my investigation continues.

The funny thing here is, I am one of the users who didn’t notice any issues myself scrolling, I don’t have a graphics card on this work PC, but it is a pretty beef gaming specced machine. However, performance metrics tell a different story when you look at what is going on under the hood.

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 27, 2018, 1:17am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/32 "2018-03-27T01:17:38Z")

</div>

It looks like pure css style/layout thing.

After loading the page, I disabled js using browser setting, to rule out the scrollspy effect.

The highest time to render a frame on my Safari is about 80ms with or without js turned on.

Then I set `* {box-shadow: none !important;}`, it doesn’t help Safari at all.

It looks like the code block `<pre class="language-markup">` slowing down my Safari, it’s choppy every time when there is code sample on my screen.

~~It is beyond me how those code tokens were positioned by css~~ (ok, looks like simply positioned by pre tag). But it looks like they have some effect on the rendering, either styles or positioning. I got no idea how to remove some css on code block to do further debug.

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 27, 2018, 6:15am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/33 "2018-03-27T06:15:24Z")

</div>

![image](https://canada1.discourse-cdn.com/flex027/uploads/aurelia/original/1X/a6745deef51d52a23526624ea989702c1413a734.jpeg)

Just a day later (-:

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 27, 2018, 6:21am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/35 "2018-03-27T06:21:14Z")

</div>

Just tried the updated guides.

Same as I tested, not enough to fix my Safari performance. Can someone update benchmark for Chrome on PC?

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [March 27, 2018, 6:45am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/36 "2018-03-27T06:45:07Z")

</div>

Well my FPS on Chrome doubled from 7 to 14. A solid improvement without question.

That’s not to say it’s any good compared to what it _could_ be: a near-constant 60 FPS on FireFox, no matter how violently I scroll.

For comparison: on a website I made for a client in Aurelia, a particular page has about 70 images on it (scaled down from 600x300 ish) with some absolute positioning tricks and I get a pretty constant 50-60 FPS there on chrome while scrolling.

On another website I made for a client, also in Aurelia, I use Materialize as well with some parallax effects. 50-60 FPS on chrome there as well while scrolling.

So it doesn’t look like it’s impossible to get a good framerate on chrome.

Further testing:

On the **homepage** of [aurelia.io](http://aurelia.io), I get **10 FPS** while scrolling in chrome compared to 60 in FireFox.

If I add `backface-visibility: none` to the `main` element (again, the absolute positioning seems to trigger a redraw on scroll) this doubles to 20. Still not great, but a lot better.

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [March 27, 2018, 6:53am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/37 "2018-03-27T06:53:15Z")

</div>

It’s definitely something with Materialize/chrome. Even on chrome’s very own chrome://extensions/ page the FPS stays at or below 10 while scrolling.

Google are the ones who need to be embarassed here if you ask me…

---

<div class="post-metadata">

**Author:** ![huochunpeng](https://avatars.discourse-cdn.com/v4/letter/h/49beb7/32.png) [@huochunpeng](https://discourse.aurelia.io/u/huochunpeng)\
**Post date:** [March 27, 2018, 7:56am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/38 "2018-03-27T07:56:47Z")

</div>

> [@fkleuver](#):
>
> chrome://extensions/ page the FPS stays at or below 10 while scrolling.

That justifies a github issue to Chrome team.

---

<div class="post-metadata">

**Author:** ![fkleuver](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/fkleuver/32/994_2.png) [@fkleuver](https://discourse.aurelia.io/u/fkleuver)\
**Post date:** [March 27, 2018, 8:30am UTC](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962/39 "2018-03-27T08:30:23Z")

</div>

That’s what I was thinking, but there is no Chrome repository 🙂

I sent them feedback, who knows if/when they’ll do something with that.

[Previous page](https://discourse.aurelia.io/t/why-is-the-tutorial-section-so-embarassing/962.md?page=1)