Explain the reasons and solutions of the conflict between filter and fixed in detail

Time:2021-6-8

Problem description

When inbodyUsed infilterWhen the filter property is changed, it will causefixedElement positioning error, that is, it is no longer relativeviewportPositioning, but relative to the whole page(bodyElement).

<html>
  <head>
    <title>css filter issue</title>
    <style>
      body {
        height: 600px;
        background: red;
        filter: grayscale(1); /*  Key code*/
      }

      .fixed {
        color: yellow;
        position: fixed;
        top: 0;
        right: 0;
      }
    </style>
  </head>
  <body>
    <div class="fixed">fixed item</div>
  </body>
</html>

The effect picture is as follows: pay attention to the top right cornerfixed itemThe element is no longer positioned relative to the top right corner of the screen view.

 

Solution

The reason for this problem is: whenfilterNot fornoneIf the element or its children haveabsoluteorfixedProperty, it creates a new containing block / container for it, causing theabsoluteorfixedThe orientation of the element changesabsoluteorfixedThe positioning of the element is < parent > element, which becomes the newly created element).

With the above example, whenbodyThe label uses thefilterProperty,filterA new containing block is generated with its location and sizebodyThe same, thenfixedThe element will be positioned according to the containing block, so we’ll seefixedElements lose their original characteristics;

However, if the filter acts on the root element (that is, the HTML tag), it will not create a new containing block for the absolute or fixed sub element.

reference resources:https://drafts.fxtf.org/filter-effects/#FilterProperty

So the solution is very simple. You just need tofilterAttributes are placed inhtmlJust put it on the label


html {
	filter: grayscale(1);
}

extend

1. position: fixed

When an element containsfixedProperty, the screen view is displayed(viewport)A containing block is created for it(containing block)Its size isviewportAnd then thefixedThe element is positioned based on the containing block. So we usually sayfixedThe element is relativeviewportTo locate.

In addition,fixedProperty creates a new cascading context. When the ancestor of the elementtransform , perspectiveorfilterAttribute nonnoneThe container changes from the viewport to the ancestor.

reference resources:https://www.w3.org/TR/css-position-3/#fixed-pos

2. HTMLLabels andbodylabel

The difference between the two can be found in this blog:http://phrogz.net/css/htmlvsbody.html

PS: HTML element is max (screen height < viewport height >, internal element height < body element height >)

Here is the article about the reasons and solutions of the conflict between filter and fixed. For more information about the conflict between filter and fixed, please search the previous articles of developer or continue to browse the following articles. I hope you can support developer more in the future!