Detailed explanation of the causes and solutions of conflicts between filters and fixed

Detailed explanation of the causes and solutions of conflicts between filters and fixed

Problem Description

When filter attribute is used in body , it will cause incorrect positioning of the fixed element, that is, it will no longer be positioned relative to viewport , but relative to the entire web page ( body element).

<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 diagram is as follows: Note that fixed item element in the upper right corner is no longer positioned relative to the upper right corner of the screen view.

Solution

The reason for this problem is: when filter is not none , if the element or its child element has absolute or fixed attribute, a new containing block/container will be created for it, which will cause the positioning of the absolute or fixed element to change (that is, the positioning <parent> element of absolute or fixed element is changed to the newly created element).

In the above example, when filter attribute is used in the body tag, filter will generate a new containing block with the same position and size as body , and then fixed element will be positioned according to this containing block, so we will see that fixed element loses its original characteristics;

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

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

So the solution is very simple, just put the filter attribute on the html tag

html {
	filter: grayscale(1);
}

Extensions

1. position: fixed

When an element includes the fixed attribute, the screen viewport creates a containing block for it, whose size is the size of viewport , and the fixed element is then positioned based on the containing block. So usually we say that fixed elements are positioned relative to viewport .

Additionally, fixed attribute creates a new stacking context. When transform , perspective , or filter property of an element's ancestor is non none , the container is changed from the viewport to that ancestor.

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

2. HTML tags and body tags

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>)

This concludes this article on the causes and solutions for conflicts between filters and fixed. For more information on conflicts between filters and fixed, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. We hope that everyone will support 123WORDPRESS.COM in the future!

<<:  Recommended tips for web front-end engineers

>>:  A detailed introduction to the basics of Linux scripting

Recommend

Introduction to the use of anchors (named anchors) in HTML web pages

The following information is compiled from the Int...

A brief discussion on the role of Vue3 defineComponent

Table of contents defineComponent overload functi...

Implementation of textarea adaptive height solution in Vue

Table of contents Hidden Problems Solution to ada...

Analysis and practice of React server-side rendering principle

Most people have heard of the concept of server-s...

Set an icon for the website to be displayed on the far left of the browser tab

What is the purpose of this sentence? Copy code Th...

Example of creating circular scrolling progress bar animation using CSS3

theme Today I will teach you how to create a circ...

Detailed installation and configuration of hadoop2.7.2 under ubuntu15.10

There are many Hadoop installation tutorials on L...

TypeScript decorator definition

Table of contents 1. Concept 1.1 Definition 1.2 D...

5 Tips for Protecting Your MySQL Data Warehouse

Aggregating data from various sources allows the ...

Introduction to the use of select optgroup tag in html

Occasionally, I need to group select contents. In ...

Detailed explanation of how to use CMD command to operate MySql database

First: Start and stop the mysql service net stop ...

Detailed example of changing Linux account password

Change personal account password If ordinary user...

JS implementation of carousel carousel case

This article example shares the specific code of ...

HTML table markup tutorial (2): table border attributes BORDER

By default, the border of the table is 0, and we ...

JavaScript imitates Jingdong carousel effect

This article shares the specific code for JavaScr...