Skip to content

Scrollbar corners are not being colored according to the theme #1797

@rinart73

Description

@rinart73

Current Behavior

Scrollbar corners appear when an element has both vertical and horizontal scrollbars.
Currently Skeleton doesn't apply any styles to them, so their apperance depends on a browser.
On the screenshot below - scrollbar corner in the bottom right is white because my OS and Chrome mode is light, even though website mode is dark.
image

Expected Behavior

Expected to have scrollbar corner be styled according to the theme settings and mode (light/dark).

Steps To Reproduce

  1. Use any component/tag.
  2. Ensure that it has both scrollbars. Example:
<div class="overflow-auto w-20 h-32">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Aenean sed sagittis nibh, vel sollicitudin justo.
  Etiam dapibus ultricies felis, sit amet pellentesque justo sollicitudin sed.
  Suspendisse potenti.
</div>

Link to Reproduction / Stackblitz

https://stackblitz.com/edit/skeletonlabs-repl-gh962k?file=src%2Froutes%2F%2Bpage.svelte

More Information

This can be solved with the ::-webkit-scrollbar-corner CSS pseudo-element by styling it according to the current theme and mode.

Alternatively the following style could be used, that way the corner will just match the background color of an element.

::-webkit-scrollbar-corner { background-color: transparent; }

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions