Site styles break the picker frame

[dimisa-RUAdList]

Prerequisites

• I performed a cursory search of the issue tracker to avoid opening a duplicate issue
• The issue is not present after wholly disabling uBlock Origin ("uBO") in the browser
• I checked the documentation to understand that the issue I report is not a normal behavior

I tried to reproduce the issue when...

• uBO is the only extension
• using a new, unmodified browser profile

Description

Site styles break the picker frame

See: view-source:https://www.opennet.ru/

html.dark-mode { filter: invert(90%); background-color: black; } html.dark-mode img:not([src*="opennet2"]), video, iframe{ filter: invert(100%); }

A specific URL where the issue occurs

https://www.opennet.ru/~

Steps to Reproduce

1. Open https://www.opennet.ru/~
2. On dark-mode: https://i.imgur.com/9b3bUhV.jpg
3. Open https://www.opennet.ru/ and try using the picker
4. Scroll down the page

Expected behavior

Picker works as usual

Actual behavior

The picker's frame is broken - its positioning is broken, the color scheme may change

Configuration

uBlock Origin: 1.42.0
Firefox: 98
filterset (summary): 
  network: 99248
  cosmetic: 89614
  scriptlet: 18198
  html: 635
listset (total-discarded, last updated): 
  added: 
    fanboy-cookiemonster: 27670-53, 20h.29m
    ublock-quick-fixes: 123-4, 1m
  default: 
    user-filters: 6-0, never
    ublock-filters: 31051-36, 1m
    ublock-badware: 4011-3, 1m
    ublock-privacy: 211-0, 1m
    ublock-abuse: 72-0, 1m
    ublock-unbreak: 1741-0, 1m
    easylist: 65125-588, 20h.29m
    easyprivacy: 26744-580, 1m
    urlhaus-1: 7399-0, 1m
    plowe-0: 3687-2, 1m
    RUS-0: 41482-164, 1m
filterset (user): [array of 8 redacted]
trustedset: 
  added: [array of 2 redacted]
  removed: 
    edge-scheme
    moz-extension-scheme
switchRuleset: 
  removed: 
    no-csp-reports: * true
modifiedUserSettings: 
  advancedUserEnabled: true
  showIconBadge: false
modifiedHiddenSettings: 
  filterAuthorMode: true
  uiFlavor: classic
supportStats: 
  allReadyAfter: 1113 ms
  maxAssetCacheWait: 495 ms

[krystian3w]

#987 (comment)

So we wait with pages where iframe was rotated by transform: rotate(180deg) or rotate: 180deg.

[gorhill]

I could reproduce the filter: invert(), which I fixed, but I could not reproduce "positioning is broken".

[krystian3w]

That is glitch in Firefox (no in Chromium) after use css filters - no longer works position:

• Fixed
• Absolute
• maybe Sticky and relative too.

https://developpaper.com/explain-the-reasons-and-solutions-of-the-conflict-between-filter-and-fixed-in-detail/

[dimisa-RUAdList]

@gorhill
"positioning is broken":

opennet_picker.mp4

[krystian3w]

Reupload into Github domain if you no block my ID in network filters:

https://user-images.githubusercontent.com/35370833/161556381-c466341a-9546-41e3-8d05-03525cdddc5e.mp4

Guilty is filter on html element (mother page).

html.dark-mode { filter: invert(90%); background-color: black; } 

Workarounds due similar troubles to: #419 is:

• use browser without bug positioning (All Chromium family, I suppose Safari 11 too).
• save in my filters tab filter to disable almost all tries to use filter by page.
• don't enable harmful implementation dark mode by filters insted change few colors in layout.

[gorhill]

Ok the position issue is specific to Firefox, I can't fix that in uBO. Also since the filter is also set on the root element, not something I can fix in uBO. What I fixed is the element picker being rendered as dark theme when not toggling the page to dark.