Issues with CSS filters affecting the layout of webpage elements

Is there a way to keep a div pinned to the bottom of the viewport while applying a filter to the body in CSS? I tried using position: fixed; bottom: 0px, but it seems to mess up the positioning when a filter is added to the body.

body {
  filter: brightness(120%);
}

.tab {
  position: fixed;
  bottom: 0px;
  width: 100%;
  color: #fff;
  background-color: red;
}
<html>

<body>

  SCROLL TO BOTTOM, notice the red div<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id turpis dolor. Etiam eu erat et orci volutpat malesuada et nec sem. Curabitur eu neque eu augue lobortis laoreet. Morbi malesuada, ligula sed
  facilisis sodales, justo augue porta massa, a posuere nisi ex et turpis. Donec viverra in diam in cursus. Vivamus laoreet luctus lacus, non dictum odio efficitur a. Nunc varius neque hendrerit velit viverra maximus. Quisque fermentum vestibulum odio,
  sit amet feugiat urna cursus vitae. Praesent et convallis est, in bibendum diam. Vivamus auctor dignissim justo, sed hendrerit lectus vehicula eu. Sed gravida tempus ex, a volutpat justo convallis aliquet.<br><br> Pellentesque id tristique dui. Vivamus
  rutrum nisi turpis, ut interdum ex fringilla sit amet. Curabitur ac ornare ligula. Etiam congue tempus turpis, eu pulvinar est scelerisque at. Donec at malesuada libero. Nulla suscipit lorem ac tincidunt lacinia. Cras tincidunt odio dui, vel egestas
  purus efficitur eu. Curabitur luctus, augue et iaculis malesuada, augue tellus aliquam lacus, et tincidunt libero quam sit amet ante. Quisque non tortor nisl. Donec ullamcorper in neque id sagittis. Vestibulum sagittis nulla sed turpis rutrum tempus.
  Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Pellentesque sed pellentesque mi. In semper ornare accumsan. Aenean quis nunc aliquam, venenatis elit nec, imperdiet lorem. Nullam erat lacus, sagittis ornare
  vehicula id, rutrum non ipsum.<br><br> Duis ornare viverra ex, a lobortis est consequat ornare. Fusce ultricies nisi vel ipsum venenatis convallis. Nulla cursus elit quis lobortis ornare. Suspendisse accumsan nisi sed ligula vulputate ultrices. Proin
  ultrices euismod laoreet. Aliquam in leo vitae ligula sollicitudin dapibus. Quisque semper ante sed nisi porta, sed tincidunt dui varius. Integer eleifend condimentum augue, at gravida nisl tempus eget. Pellentesque habitant morbi tristique senectus
  et netus et malesuada fames ac turpis egestas. Maecenas suscipit dui sit amet pulvinar fermentum. Aenean molestie turpis vel tempus venenatis. Vivamus arcu nisl, lobortis at auctor sit amet, iaculis sit amet arcu.<br><br> Nulla sodales efficitur malesuada.
  Nunc eros arcu, condimentum id quam eu, convallis mollis odio. Mauris at mollis ante. Donec pharetra justo sit amet nisl volutpat, quis congue est fermentum. Aliquam erat volutpat. Curabitur id nisi sit amet tortor vestibulum ultricies. Praesent a malesuada
  nisl. Integer sodales mauris a ornare egestas. Nam eu massa metus. Duis sed ipsum quam. Etiam ultricies diam ac sodales suscipit. Nullam molestie metus et tincidunt dictum. Suspendisse consectetur dictum sem in lacinia. Nullam sed massa gravida, commodo
  nisi id, suscipit urna. Integer tristique ante consequat lectus luctus, vel aliquet erat sagittis. Fusce suscipit ut arcu at blandit.<br><br> Vivamus et blandit urna. Maecenas quis metus sit amet velit fringilla ullamcorper. Sed iaculis odio leo, non
  consequat risus ultrices sit amet. Maecenas ac mi metus. Phasellus vitae erat fringilla mauris lacinia suscipit sit amet et elit. Pellentesque sit amet quam a purus pretium ornare. Maecenas in efficitur nisl, in imperdiet ligula. Quisque sit amet commodo
  quam. In vehicula turpis nec pretium sagittis.<br><br> Maecenas consequat ante in quam aliquam lobortis. Duis pellentesque ornare quam, sit amet maximus sapien imperdiet sed. Praesent eu lacinia dolor. Proin cursus dapibus dui. Nunc rhoncus augue ipsum.
  In mollis urna eget nibh luctus convallis. Nam lectus mi, bibendum vehicula cursus id, ornare eget arcu. Fusce fringilla justo vestibulum orci eleifend, aliquam egestas nunc sodales. Praesent a neque non ex blandit sodales. Integer sit amet convallis
  sem, sed cursus diam. Aenean nec pulvinar sem.<br><br> Cras facilisis, sapien vitae dictum fringilla, felis nisl rhoncus ligula, sed iaculis enim ante ornare est. Suspendisse non sapien leo. Curabitur fringilla semper nisl et blandit. Nam consequat
  faucibus imperdiet. Pellentesque eu risus ornare, luctus sapien vitae, placerat ipsum. Donec iaculis purus ac elit pellentesque, eu eleifend elit iaculis. Integer interdum, lorem at hendrerit bibendum, leo magna luctus risus, quis egestas velit lacus
  at nibh. Nullam mollis placerat metus, nec pretium tortor bibendum ac.<br><br> Nulla quam lacus, rutrum sed imperdiet sit amet, congue in elit. Proin in arcu auctor, gravida libero sed, efficitur ligula. Cras vitae sollicitudin lacus. Nam fermentum
  ultrices diam, sit amet fermentum nibh vehicula non. Phasellus quis maximus lacus, non rutrum massa. Ut vitae dolor sit amet quam egestas sodales in a tellus. Sed consequat justo sed ipsum vehicula, a elementum velit iaculis. Etiam luctus libero sit
  amet pellentesque finibus. Nunc metus velit, accumsan ac congue at, luctus sit amet magna. Sed consectetur lacinia urna, eget elementum massa ultricies id. Duis ut congue ante. Proin sodales feugiat dignissim. Cras urna orci, luctus a dignissim eu,
  auctor mattis purus.<br><br> Nullam leo tortor, consequat in neque at, ullamcorper dictum risus. Etiam id lorem dignissim, vestibulum erat non, hendrerit mi. Suspendisse leo justo, pharetra in ullamcorper pellentesque, euismod nec risus. Praesent luctus
  pulvinar nisl, nec placerat augue. Praesent vulputate non lacus id finibus. Duis vel nunc vehicula, finibus leo nec, congue felis. Quisque semper eget sapien id gravida. Aenean quis neque eu lacus volutpat aliquet. Nulla bibendum nulla molestie, tincidunt
  dui molestie, tristique massa. Integer tellus dolor, tempus quis felis vel, mollis rhoncus velit. Phasellus convallis semper arcu vel viverra. Aenean venenatis pulvinar metus, mollis sagittis est vestibulum non. Nulla vel ligula ac nunc dictum ultrices
  ut ut odio. Cras egestas tellus dolor. Phasellus vehicula justo nibh, quis feugiat nisl condimentum ac. Sed ac dui sit amet felis iaculis semper.
  <br><br> Consequat malem vos legimus uterque, ad regionem probable affert his.

To see this issue in action, check out this jsfiddle.

The div ends up at the bottom of the page instead of sticking to the viewport when I add the brightness filter. Any ideas on how to resolve this?

htmlcssfilterposition

Answer №1

Look no further, this solution will resolve the issue at hand.

html {
  filter: brightness(120%);
}

.tab {
  position: fixed;
  bottom: 0px;
  width: 100%;
  color: #fff;
  background-color: red;
}
<html>

<body>

  SCROLL TO BOTTOM, notice the red div<br><br> Lorem ipsum dolor sit amet, consectetur adipiscing elit.... sed ac dui sit amet felis iaculis semper.
  <br><br> Sed sollicitudin leo vel consequat tincidunt. Cras sodales urna id leo semper maximus eget et est. Nam quis vestibulum justo...
    <br><br><br>
  <div class=tab>THIS SHOULD FIX TO VIEWPORT, NOT TO PAGE BASE</div>
</body>

</html>

Further explanation for this workaround: When applying the filter property to an element such as your <body>, any children with position: fixed or position: absolute will consider the filtered element their relative parent, causing them to be positioned relative to it.

The most effective solution within my knowledge is using filter on the <HTML> element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Css shaky letters transformation

[SOLUTION] To resolve this issue, you can utilize the will-change CSS property that enforces GPU rendering: will-change: transform; [ORIGINAL QUESTION] After extensive searching on the internet, I have yet to find a solution to a seemingly simple prob ...

javascriptcsstransformjittertranslate3d

browsing through elements in express-handlebars

this is the data structure I pass to my handlebars template module.exports = function(showHeader, userId){ // defining the model return { userId: userId, seminars: userSeminars; }; }; var userSeminars = [{ // sample data seminarId: 1, ...

htmlnode.jsexpresshandlebars.js

When the caret triangle is upside down, it indicates that a drop-down menu is available even when the

I am facing an issue with a dropdown list where the triangle indicator is incorrectly displayed: https://i.stack.imgur.com/L4NBW.png Both images show that the arrows are in reverse direction, and I am struggling to identify the cause of this problem. He ...

javascriptjqueryhtmlcss

Ways to vertically center an absolutely positioned element

In the code snippet below, there is a .square-container that is absolutely positioned and contains a square. The goal is to vertically center the .square-container within its parent div. .container { position: relative; background-color: blue; } ...

htmlcss

I need to display a VARCHAR variable retrieved from PHP in a visually appealing way with HTML/CSS. What is the best way to automatically format it to prevent it from appearing as one long, uninterrupted sentence?

Is there a way to automatically format the text retrieved from a VARCHAR variable in a MySQL database via PHP so that it displays correctly with line breaks? Currently, when I display it on an HTML page, it appears as one long string. I've considered ...

phpmysqlhtmlcssvarchar

The value of the checkbox with the `on` attribute is not being passed to the Action class. Should I retrieve the parameter directly from

When submitting a form to my action class using the classic getter/setter method with Struts 2, all fields receive their values except for a boolean field which remains false even after checking the corresponding checkbox. Here is an example of the checkb ...

htmlcheckboxstruts2struts2-interceptorsstruts-tags

Additional <li> elements are created in Internet Explorer versions 8 and 9

Currently in the process of setting up a new website/landing page. Upon heading to the right column at the bottom (where the pictures are located), you will notice <li> elements containing pictures within containers. The only issue that arises is whe ...

htmlcsshtml-lists

Track how long a webpage element remains in view using Seleniumwebdriver

After interacting with the page, a loader briefly appears and then disappears from the page html. <div class="loader"> <img src="/static/media/loading-anim-windmill.9f645983.gif" alt="loading"><p>Loading...&l ...

pythonhtmlseleniumwebdriverwaitexpected-condition

Is it possible to reposition the vertical scrollbar to a location that is not on the left or right side?

Whenever I resize my modal on small screens, a horizontal scrollbar appears, causing the vertical scrollbar to disappear as it gets stuck on the right side. I am looking for a solution to keep the vertical scrollbar on the right side of the modal while scr ...

javascripthtmlcss

Ways to Create a Webpage with a Single Color Palette

Struggling to update the background color on my webpage and hitting a wall. Even with content, the black background only extends as far as the content does. I've experimented with extending the content, using the body selector, and universal selector ...

htmlcss

Can Spring Boot be set up to return JSON instead of HTML for InvalidTokenException when configuring OAuth2?

When testing my Spring Boot application, I realized that querying one of my REST endpoints with an invalid token using Postman resulted in a response content in HTML format instead of JSON. The endpoint correctly responded with 401 InvalidTokenException, b ...

htmljsonspring-bootoauth-2.0spring-security-oauth2

What are the steps to create a CSS 'shell' design?

How can I create an image displayed as a circle with border-radius:50%, along with some text on the same line that has a set width and background color? I want to achieve this without hard coding values. What is the best approach to do this? Check out the ...

htmlcsscss-shapes

Is there a way to modify the background color with Bootstrap?

While following a Bootstrap tutorial, I stumbled upon an issue that I can't seem to resolve. In my layout, I have an article and a sidebar in a row, with the article taking up 9 columns and the sidebar taking up 3 columns. The background color of the ...

htmlcsstwitter-bootstrap

Content within the p tag is failing to wrap onto separate lines

Take a look at the image below: Here is the code causing issues: <div class="excerpt"> <p>Manual for downloading and installing digital content from the Educational Canaima Project, comprised of learning resources that aim to promote interac ...

htmlcss

How to target a class with a specific number in CSS selectors

My mobile hybrid application is built with Sencha Touch 2 and requires some customization based on the iOS version it's running on. In my Sass stylesheet, I originally had the following selector: .x-ios-7 { /* add iOS7 customizations here */ } How ...

csssass

What methods can I use to create a navigation bar similar to this design?

Lately, I've noticed a growing trend in navigation bars that are designed to resemble waves. Wavey Navbar I'm eager to incorporate a similar navbar into my website, but I'm struggling to figure out how to do it. I'm working with react ...

htmlcss

css issue with opacity transition not functioning properly

My website is designed to display images in a table, but some of them are Stock Photos, so I need to indicate the source. I want the source to appear when the user hovers over the picture. For this purpose, I have assigned the source tag to a class (.PicSo ...

htmlcsshoveropacity

Trouble with jQuery script causing initial word count issue in textarea upon page load

I have implemented a word count textarea jQuery script and I am trying to figure out how to update the word count onload to 2 when the text area initially displays "this example". Currently, it shows 0 words. Although I can set focus on it and move the c ...

javascriptjqueryhtmlcountwords

Effortlessly saving money with just one click

I have a search text box where the search result is displayed in a graph and then saved in a database. However, I am facing an issue where the data is being saved multiple times - first time saves properly, second time saves twice, third time three times, ...

javascriptjqueryjsonhtml

Attempting to customize react-bootstrap styling within a NextJS application

I'm currently working on a project using Next.js and attempting to integrate Bootstrap as the CSS framework. After installing react-bootstrap into the project, I proceeded to create the navigation bar. My goal is to assign an '.active' class ...

cssreactjsnext.jsreact-bootstrapbootstrap-5