CSS pseudo element: -webkit-scrollbar

[yourduskquibbles]

Prerequisites

• I verified that this is not a filter issue
  • Filter issues MUST be reported at filter issue tracker
• This is not a support issue or a question
  • Support issues and questions are handled at /r/uBlockOrigin
• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
  • Your issue may already be reported.
• I tried to reproduce the issue when...
  • uBlock Origin is the only extension
  • uBlock Origin with default lists/settings
  • using a new, unmodified browser profile
• I am running the latest version of uBlock Origin
• I checked the documentation to understand that the issue I report is not a normal behavior

Description

After pinning a header to the top of the page, I also want to change the behavior of the pseudo element -webkit-scrollbar on a page and set the width to something other than 0px that the site CSS is using but I don't believe I can set it using the :style() filter.

This could be somewhat related to gorhill/uBlock#2448 where pseudo element ::before and ::after were added to uBO.

A specific URL where the issue occurs

https://www.bittrex.com/

Steps to Reproduce

1. Add the following filters

• bittrex.com##body .scroll-wrapper::-webkit-scrollbar:style(width: 30px !important;)
• bittrex.com##body .scroll-wrapper:style(height: auto !important; top: 0 !important; overflow-x: hidden !important; overflow-y: scroll !important;)
• bittrex.com##.navbar-fixed-top:style(position: absolute !important; border: none !important; top: 0 !important;)

2. Navigate to https://www.bittrex.com/
3. Observe that the scrollbar is not present because the scrollbar width is set to 0px by the sites CSS.

Please note: With the filter bittrex.com##body .scroll-wrapper:style(height: auto !important; top: 0 !important; overflow-x: hidden !important; overflow-y: scroll !important;) that overflow-y being set to scroll just helps to illuminate the issue because when hovered a scrollbar will appear, but unhovered there will be no bar. If you remove the overflow-y from the rule above, no scroll bar will be visible on hover or no hover. (You should still be able to scroll using arrow keys or mousewheel in either case.)

4. Also observe in the console, when you inspect the scroll-wrapper clearfix DIV, the Pseudo ::scrollbar element at the bottom of the Inspectors Styles page is still being set as 0px in the DIV body .scroll-wrapper::-webkit-scrollbar by the website's CSS

Screenshot of console with highlighted area from Step 4 is below:

Expected behavior:

The scrollbar would be visible after setting the pseudo element -webkit-scrollbar width to 30px with the cosmetic filter bittrex.com##body .scroll-wrapper::-webkit-scrollbar:style(width: 30px !important;)

Actual behavior:

The scrollbar is still 0px when the page is unhovered as declared by the page CSS

Your environment

Chrome test profile with default uBO filters & settings.

• uBlock Origin version: 1.16.11.101
• Browser Name and version: Chrome Version 67.0.3396.99 (Official Build) (64-bit)
• Operating System and version: Windows 10 64 bit

[uBlock-user]

Firefox Nightly is not affected(::-webkit-scrollbar being only available in WebKit-based browsers) and scrollbar appears without having to add any of those filters.

[david-tap]

It looks like this bug has regressed, possibly due to the pseudoselector starting with a hyphen "-". I'm unable to to add a style to scrollbars.

[gorhill]

@david-tap Thanks for the feedback, I will fix this in the next dev build, so this will be fixed in next stable release.

[krystian3w]

small evacuation #382 (comment)

---

vod.naekranie.pl I try revert scrollbar and recover arrows:

naekranie.pl##*::-webkit-scrollbar:style(width:14px !important; height:14px !important; )

naekranie.pl##*::-webkit-scrollbar-track:style(background:#ffffff !important; #b0b0b1 !important;)
naekranie.pl##*::-webkit-scrollbar-thumb:style(background:#404040 !important; border-radius: 0 !important;)

naekranie.pl##*::-webkit-scrollbar-thumb:hover:style(background:#505050 !important; )
naekranie.pl##*::-webkit-scrollbar-thumb:active:style(background:#404040 !important; )

naekranie.pl##*::-webkit-scrollbar-button:style(border-style:solid !important; height:16px !important; width:16px !important; background-color: #ffffff !important; )

naekranie.pl##*::-webkit-scrollbar-button:single-button:vertical:decrement:style(border-width:0 7px 14px !important; border-color:transparent transparent #404040 !important; )
naekranie.pl##*::-webkit-scrollbar-button:single-button:vertical:decrement:hover:style(border-color:transparent transparent #505050 !important; )

naekranie.pl##*::-webkit-scrollbar-button:single-button:vertical:increment:style(border-width:14px 7px 0 !important; border-color:#404040 transparent transparent !important; )
naekranie.pl##*::-webkit-scrollbar-button:single-button:vertical:increment:hover:style(border-color:#505050 transparent transparent !important; )

naekranie.pl##*::-webkit-scrollbar-button:single-button:horizontal:decrement:style(border-width:7px 14px 7px 0 !important; border-color:transparent #404040 transparent transparent !important; )
naekranie.pl##*::-webkit-scrollbar-button:single-button:horizontal:decrement:hover:style(border-color:transparent #505050 transparent transparent !important; )

naekranie.pl##*::-webkit-scrollbar-button:single-button:horizontal:increment:style(border-width:7px 0 7px 14px !important; border-color:transparent transparent transparent #404040 !important; )
naekranie.pl##*::-webkit-scrollbar-button:horizontal:increment:hover:style(border-color:transparent transparent transparent #505050)

but any combination with pseudo-class selector/element was fail:

::-webkit-scrollbar:hover (or :active)
::-webkit-scrollbar-thumb:hover (or :active)
::-webkit-scrollbar-button:hover (or :acitve, :single-button, :horizontal, :vertical, :increment)

If what I remember it was recommended to fix it in Stylus/Stylish (maybe in topic about why no support media queries @media).

[gorhill]

any combination with pseudo-class selector/element was fail

This will have to be reported in a new issue, othewise it's guaranteed I will forget about this.