I am testing this on Edge 20.10240.16384.0
I have an element whose position is fixed and has CSS Filters applied to it. This works great in all browsers except Microsoft Edge, where the position of the element doesn't remain fixed. This issue is directly related to CSS3 Filters as removing them makes the position fixed work correctly
Here is a basic example of this. It works correctly (aka the fixed background remains fixed) on browsers other than Microsoft Edge.
<!DOCTYPE html><html><head><style> body { height: 5000px; } .fixed { position: fixed; left: 0; background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif); background-repeat: repeat; background-attachment: fixed; height: 100%; width: 100%; -webkit-filter: brightness(70%); -moz-filter: brightness(70%); -o-filter: brightness(70%); filter: brightness(70%); }</style></head><body><div class='fixed'></div></body></html>After searching around , I came across https://connect.microsoft.com/IE/feedback/details/1810480/ms-edge-rendering-problem-of-css-filter , which details the same issue but has been marked as Fixed most likely as it couldn't be reproduced. I am attaching GIF for the same -
Microsoft Edge -
Google Chrome -