Menu
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 -
997
Set everything up as you would if you want to position: absolute inside a position: relative container, and then create a new fixed position div inside the div with position: absolute , but do not set its top and left properties. It will then be fixed wherever you want it, relative to the container.
An element with position: sticky; is positioned based on the user's scroll position. A sticky element toggles between relative and fixed , depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).
Absolute positioningElements that are relatively positioned remain in the normal flow of the document. In contrast, an element that is absolutely positioned is taken out of the flow; thus, other elements are positioned as if it did not exist.
A fixed position element is positioned relative to the viewport, or the browser window itself. The viewport doesn't change when the window is scrolled, so a fixed positioned element will stay right where it is when the page is scrolled.
It is a bug, ms-edge-rendering-problem-of-css-filter, should have been fixed but obviously not.
Here is a workaround, where you still can use position: fixed and the image and filter is set using the :after pseudo-element.
body {
height: 5000px;
}
.fixed {
position: fixed;
left: 0;
height: 100%;
width: 100%;
}
.fixed:after {
content: ' ';
position: absolute;
left:0;
top: 0;
height: 100%;
width: 100%;
background-image: url(https://lh5.googleusercontent.com/-REJ8pezTyCQ/SDlvLzhAH-I/AAAAAAAABeQ/mC1PXNiheJU/s800/Blog_background_750.gif);
background-repeat: repeat;
background-attachment: fixed;
-webkit-filter: brightness(70%);
-moz-filter: brightness(70%);
-o-filter: brightness(70%);
filter: brightness(70%);
}<div class='fixed'></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
