Slow website picocss.com

[ricardasjak]

I don't know if this falls into a bug category or maybe nice to have feature... Sorry in advance, if this is a bit off topic.

Describe the issue

open https://picocss.com/docs/version-picker
switch browser tab back and forth and the switch back is noticeably slow.
There were some other cases too, when UI feels very slow at times. I don't think it's version picker specific problem.

Reproduction URL

Open https://picocss.com/docs/version-picker
Switch to other tab in your browser, and then switch back

Environment

Chrome latest
Mac M1 Pro, 32GB RAM

[marko878]

the wut now?

[mwargan]

@ricardasjak hmm.

There does seem to be some sort of leak on this page. I am seeing a continuous increase in listeners and JS heap.

[brtz]

Hi there,

can confirm, happens on Edge on two different Macs (m1 air and m1 pro) after a few clicks. I could not reproduce this with a Windows device yet, but that might be because the machine's heavier speced.

[FWeinb]

Also noticed this issue and tracked it down to be related to this:

pico/scss/components/_card.scss

Line 15 in 1039a47

box-shadow: var(#{$css-var-prefix}card-box-shadow);

pico/css/pico.css

Line 322 in 1039a47

--pico-card-box-shadow: var(--pico-box-shadow);

pico/css/pico.css

Line 271 in 1039a47

--pico-box-shadow: 0.0145rem 0.029rem 0.174rem rgba(129, 145, 181, 0.01698), 0.0335rem 0.067rem 0.402rem rgba(129, 145, 181, 0.024), 0.0625rem 0.125rem 0.75rem rgba(129, 145, 181, 0.03), 0.1125rem 0.225rem 1.35rem rgba(129, 145, 181, 0.036), 0.2085rem 0.417rem 2.502rem rgba(129, 145, 181, 0.04302), 0.5rem 1rem 6rem rgba(129, 145, 181, 0.06), 0 0 0 0.0625rem rgba(129, 145, 181, 0.015);

But the main issue is the use of box-shadow inside the transition property here:

pico/scss/forms/_basics.scss

Line 186 in 1039a47

box-shadow var(#{$css-var-prefix}transition);

As chrome based browsers don't support box-shadow compositing (see below)

(Taking 342ms on a M4 Pro blowing the frame budget of ~8ms (120hz) by ~38x)

[benhovinga]

Also seeing performance issues with this CSS Library. M2 Macbook Air, Brave browser.

I notice it most when open the DevTools (F12) with it docked to a side of the window. Resize the DevTools dock back and forth fast and it lags so much. Visit any other website or remove the CSS Library and do the same thing, you will notice no lagging.

[benhovinga]

I agree with @FWeinb that the Card Component (<article> tag) is the cause of the performance issues.

If I disable the card component module within my styles.scss file the performance improves.

@use "@picocss/pico/scss/pico" with (
  $modules: (
    "components/card": false
  )
);

Brave Browser Version 1.78.102 Chromium: 136.0.7103.113, M2 Macbook Air

[benhovinga]

I have traced down a little further and believe that the shadow helper function is the root cause of the performance issues.

pico/scss/helpers/_functions.scss

Line 18 in 1039a47

@function shadow($color) {

It is called from _light and _dark default themes

pico/scss/themes/default/_light.scss

Line 60 in 1039a47

#{$css-var-prefix}box-shadow: functions.shadow($slate-400);

pico/scss/themes/default/_dark.scss

Line 60 in 1039a47

#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));

If I change these lines to use a basic value instead of the function, the performance issue is fixed.

// Example
#{$css-var-prefix}box-shadow: 10px 5px 5px red;

The shadow function generates a 7 layered shadow. Does it need to be 7 layers?

[benhovinga]

I had a few more moments to work with it and I think I have come up with a solution that isn't so computationally expensive.

// scss/themes/default/_light.scss [ln 60]
#{$css-var-prefix}box-shadow: functions.shadow($slate-400);  // Before
#{$css-var-prefix}box-shadow: 0 0 1.5rem -0.2rem #{rgba($slate-400, 0.25)};  // After

// scss/themes/default/_dark.scss [ln 60]
#{$css-var-prefix}box-shadow: functions.shadow(color.mix($black, $slate-950));  // Before
#{$css-var-prefix}box-shadow: 0 0 1.5rem -0.2rem #{rgba(color.mix($black, $slate-950), 0.25)};  // After

To me and my old eyes these look visually identical and with less load on the browser. Performance is fixed.

Light mode

Before

After

Dark mode

Before

After