This is not a bug, it’s a legitimate feature, please read on if you want to know more.Īlso, if you plan to have fixed backgrounds on your site, try using a pseudo-element to house the image instead of using background-attachment: fixed for better scrolling performance. In the end I applied the filter to the header, main and footer separately so the toggle wasn’t affected by this. I thought the most efficient one-line fix was to apply filter: grayscale(1) on the body element, but that unfixed my toggle. It was positioned in the bottom left corner of the viewport with position: fixed. The website has a un-performant dark mode toggle that is an immediate child of the body element. I wanted to keep everything exactly the same but with a grey-scale filter applied so it would look, well you know, archived. I encountered this when I was trying to archive v1 of my website. This is because applying a filter on the fixed element’s immediate parent makes it becoming the containing block instead of the viewport. See the Pen Fixed positioning and CSS filters by Chen Hui Jing ( CodePen. If you have a fixed element on your page, which means it doesn’t move when you scroll, you might realise that it no longer acts fixed if you apply a CSS filter on its nearest ancestor. *cue look of disapproval from webperf folk everywhere* ಠ_ಠīut then it spiralled off into other things, so I’m moving the conclusions up to the top, and if anyone is interested in the whys, you can read on after that. It wasn’t like I didn’t know, I just wasn’t actively thinking about it. The original point of writing this was to remind myself that whenever I want to fix the position of anything on a web page, performance considerations must be top-of-mind. I thought this was going to be a short-ish note on fixed positioning and jank, but as with almost everything I write, it grew into a long-ish post about containing blocks, rendering and scroll performance.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |