Css filter for parent break position:fixed child

Talk about code development, features, specific bugs, enhancements, patches, and similar things.
Forum rules
Please keep everything here strictly on-topic.
This board is meant for Pale Moon source code development related subjects only like code snippets, patches, specific bugs, git, the repositories, etc.

This is not for tech support! Please do not post tech support questions in the "Development" board!
Please make sure not to use this board for support questions. Please post issues with specific websites, extensions, etc. in the relevant boards for those topics.

Please keep things on-topic as this forum will be used for reference for Pale Moon development. Expect topics that aren't relevant as such to be moved or deleted.
User avatar
LET33T37
Moongazer
Moongazer
Posts: 8
Joined: 2021-05-06, 07:06

Css filter for parent break position:fixed child

Unread post by LET33T37 » 2024-06-14, 11:49

Apply css fiter causes the position:fixed child(button) become relative.

Code: Select all

:root {background-color: #fefefe; filter: invert(1) hue-rotate(180deg);}

Code: Select all

const btn = document.body.appendChild(document.createElement("button"));
btn.textContent = "📌";
btn.style = "position: fixed; z-index: 1; top: 20px; left: 20px;";

User avatar
Moonchild
Pale Moon guru
Pale Moon guru
Posts: 37658
Joined: 2011-08-28, 17:27
Location: Motala, SE

Re: Css filter for parent break position:fixed child

Unread post by Moonchild » 2024-06-14, 12:12

Please be less minimalist in your reporting. We can't do anything with this without having to guess 80% of what you mean.
"A dead end street is a place to turn around and go into a new direction" - Anonymous
"Seek wisdom, not knowledge. Knowledge is of the past; wisdom is of the future." -- Native American proverb
"Linux makes everything difficult." -- Lyceus Anubite

Kris_88
Board Warrior
Board Warrior
Posts: 1101
Joined: 2021-01-26, 11:18

Re: Css filter for parent break position:fixed child

Unread post by Kris_88 » 2024-06-14, 13:51

Confirmed.

Indeed, "html { filter: blur(1px); }" works differently in MS Edge.
However, "body { filter: blur(1px); }" works equally wrong.

Code: Select all

<html>
<head>
<style>
 html { filter: blur(1px); } 
</style>
</head>

<body>
<button type="button" style="position:fixed;top:20px;left:20px;background:red;";>test</button>

1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10<br>
</body>
</html>

User avatar
LET33T37
Moongazer
Moongazer
Posts: 8
Joined: 2021-05-06, 07:06

Re: Css filter for parent break position:fixed child

Unread post by LET33T37 » 2024-06-14, 14:15

Sorry im not sure what info is needed for this report.
I think i just found the answer with details: https://stackoverflow.com/questions/52937708/why-does-applying-a-css-filter-on-the-parent-break-the-child-positioning/52937920#52937920

Kris_88
Board Warrior
Board Warrior
Posts: 1101
Joined: 2021-01-26, 11:18

Re: Css filter for parent break position:fixed child

Unread post by Kris_88 » 2024-06-14, 14:36

Ah, that's it... :lol:
" ...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."

This is not a specification, but rather a set of exceptions to the rules. I’ve been saying for a long time that this technology needs to be thrown into the trash and something solid and beautiful should be invented in its place.

User avatar
LET33T37
Moongazer
Moongazer
Posts: 8
Joined: 2021-05-06, 07:06

Re: Css filter for parent break position:fixed child

Unread post by LET33T37 » 2024-06-14, 15:11

Strange thing is current chrome and firefox seem not affect by this anymore.
Just like the drag event, current chrome and firefox can fire dragend normally without set event.dataTransfer.setData in dragstart event(not like MDN said) but pale moon wont.