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?