Web-bugs: css-tricks.com - Scrollbar not styled like the Chrome

[wellington1993]

URL: https://css-tricks.com/encapsulating-style-and-structure-with-shadow-dom/

Browser / Version: Firefox 70.0
Operating System: Linux
Tested Another Browser: Yes

Problem type: Design is broken
Description: Scrollbar not styled like the Chrome
Steps to Reproduce:
Scrollbar not styled like the Chrome

Browser Configuration

• None

_From webcompat.com with ❤️_

[reinhart1010]

The site uses a nonstandard ::webkit-scrollbar attribute to style the scrollbar, which is only supported in WebKit- and Blink-based browsers (Chrome, Opera, Safari, etc.)

Starting on Firefox 64 (or 63 with flags enabled), scrollbar styling is possible through CSS Scrollbars Module Level 1 (CSSWG Draft) syntax, which is also documented on MDN.

Last year I made a reference, cross-browser implementation of 3 standards (IE/Trident, WebKit, CSSWG) at https://codepen.io/Reinhart_Previano/pen/oJNzqP to show some differences between these standards.

[wisniewskit]

Yes, reinhart's analysis is correct. They're using the non-standard scrollbar styling support in Blink/WebKit, and haven't yet added the newer standard methods. It also looks like they're doing some styling that aren't in the standard version, like box shadows and border radius and setting specific pixel-widths. @denschub, what do you think we can/should do here?

[karlcow]

Let's switched to needscontact. If someone wants to contact codepen, please do.

[reinhart1010]

This has nothing to do with Codepen.

[karlcow]

s/codepen/css-tricks/ Thanks @reinhart1010 👍 too many things at the same time this week at the W3C TPAC.

[haseebgit]

Reached out via https://css-tricks.com/contact/

[chriscoyier]

Problem type: Design is broken

I guess I don't quite see it that way. The ::webkit styles have been around for a long time and I just used them for fun. The site still has a perfectly working scrollbar in Firefox, unstyled. When I created the custom scrollbar, the newer standardized properties weren't really available yet.

This is really cool: https://codepen.io/Reinhart_Previano/pen/oJNzqP

The customization is pretty simple though. Do the new standards APIs have every possibility that the ::webkit specific styles could do? Or is it more limited? Might be interesting to see if Autoprefixer could do a release that automatically fixed it all up.

What I do is make a Sass mixin:

@mixin scrollbars(
  $size,
  $foreground-color,
  $background-color: mix($foreground-color, white, 50%)
) {
  scrollbar-color: $foreground-color;
  scrollbar-width: $size;
  &::-webkit-scrollbar {
    width: $size;
    height: $size;
  }
  &::-webkit-scrollbar-thumb {
    background: $foreground-color;
    border-radius: $size;
    box-shadow: inset 2px 2px 2px rgba(255, 255, 255, 0.25),
      inset -2px -2px 2px rgba(0, 0, 0, 0.25);
  }
  &::-webkit-scrollbar-track {
    background: linear-gradient(
      to right,
      $gray-8,
      $gray-8 1px,
      $background-color 1px,
      $background-color
    );
  }
}

Then I call it:

  @include scrollbars(
    30px,
    linear-gradient(to bottom, $orange, $pink),
    $gray-10
  );

Note there are some specific-to-me color variables sprinkled in there, but I hope it paints the picture. Would be cool to update that mixin to output the standard styles as well.

[karlcow]

thanks @chriscoyier

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.