Intended behavior on interaction with css filter-property?

[onsetsu]

"Unsure, where to report this due to many moving parts. I at least know that you are very knowledgeable in this topic."

Browser: Chrome Version 108.0.5359.73 (Offizieller Build) (64-Bit)

I'm using this polyfill (all 3 methods) on a deeply nested element in a recursive manner to walk up the parent chain until a designated parent is found. While walking, we accumulate the offset. I use the result to position another element (an svg path).

While everything works fine, once I set the css property filter on any element in the parent chain (or a child of it), it seems to not contribute to offset computation anymore. This results in the following effect:

https://user-images.githubusercontent.com/1829825/206774853-55c29135-a384-4256-9efb-69c1fb8b1414.mp4

To reproduce:

• navigate to https://lively-kernel.org/lively4/composed-offset/start.html?load=https://lively-kernel.org/lively4/composed-offset/demos/offset/offset-left-top.md
  • same is used as an example in https://bugs.chromium.org/p/chromium/issues/detail?id=1334556#c13
• open the Chrome DevTools
• Select the out circle element in the Elements tab
• choose a parent, e.g. the div with id=container
• add a filter property to its style, e.g. filter: invert(1);
• move the port by dragging the 'simple node' label

My question is if this change in behavior due to the filter property is intentional or not?

According to https://drafts.fxtf.org/filter-effects/#FilterProperty filter inserts a containing block, but I'm unsure, if this should affect offset*.

A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in the order provided.

[josepharhar]

Thanks for reaching out! I see that filter causes elements to be considered absolutely positioned elements by offsetParent in addition to the position property. I just pushed an added check for filter. Want to see if it works?

[onsetsu]

Works like a charm. Thanks very much.