CSS scrollbar rules on body element not affecting viewport when Shields ad & tracker blocking is on

[kenherbert]

Description

According to W3C guidelines CSS scrollbar rules on the body element should be applied to the viewport's scrollbar. But when Shields ad & tracker blocking is at standard or aggressive, CSS scrollbar rules on the body element are not being applied to the viewport. If ad & tracker blocking is turned off the rules apply correctly.

This can be seen on Reddit (must be logged in and have the "Open posts in new tab" setting turned off). If you click on a post in your feed it opens as an overlay. Reddit use the following CSS rule when the post overlay is open:

body {
    overflow: hidden;
}

With ad & tracker blocking off this rule is applied to the viewport as expected. When you turn ad & tracker blocking on the rule is not applied, and you have to explicitly scope the rule to the html element to get it to work.

Steps to Reproduce

1. Log in to new Reddit
2. Click any post in feed

Actual result:

Two scrollbars are visible:

Expected result:

Only one scrollbar visible:

Reproduces how often:

Easily reproduced

Brave version (brave://version info)

Brave | 1.57.57 Chromium: 116.0.5845.163 (Official Build) (64-bit) Revision | d85db1f5df3b20ffecf96ab3f0dc7fca1d536955 OS | Windows 11 Version 22H2 (Build 22621.2134)

Version/Channel Information:

• Can you reproduce this issue with the current release? Yes
• Can you reproduce this issue with the beta channel? Yes
• Can you reproduce this issue with the nightly channel? Yes

Other Additional Information:

• Does the issue resolve itself when disabling Brave Shields? Yes
• Does the issue resolve itself when disabling Brave Rewards? No
• Is the issue reproducible on the latest version of Chrome? No

Miscellaneous Information:

[rebron]

cc: @ryanbr

[ryanbr]

which adblock lists are enabled in brave://adblock ? @kenherbert

[kenherbert]

@ryanbr Good call, I hadn't thought of an adblock list potentially causing it.

I only have EasyList Cookie and Fanboy's Mobile Notifications enabled. Disabling Fanboy's Mobile Notifications fixes the issue.

[ryanbr]

Can you try each of these in brave://adblock (custom rules). Save and reload reddit page for each line tested:

reddit.com#@#body,html.scroll-is-blocked:style(overflow: auto !important;)
reddit.com#@#body.scroll-disabled:style(overflow: visible!important; position: static!important;)
reddit.com#@#+js(aeld, block-body-scrolling)

[kenherbert]

First line works, second and third don't work.

[ryanbr]

Okay that helps, will look into it. Thanks for confirming

[ryanbr]

@kenherbert okay, try updating Fanboy's Mobile Notifications - Version: 1.0.1132 (or better) in brave://components Then refresh reddit.com

[kenherbert]

Updated to 1.0.1151, still seeing double scrollbar.