If CSS animations cause a layout shift even if they're on compositable ettributes, look for clip paths, overflow:hidden, or css filters on them or their ancestors.
So, I had a crazy problem. You'll notice that there's various draggable elements on this site... such as the "Kupietools" plugin tabs seen at left, the occasional "the site is being worked on right now" notices that pop up, etc. You can drag them around with your mouse.
This is done with a plugin (also available as a standalone javascript module, a few versions behind the plugin as I write this) that retrofits code onto various HTML elements by giving the plugin the classnames it needs to make interactive.
I was doing some optimization on the site loading to speed things up, such as getting WordPress to load a lot of CSS file late so as not to interfere with initial page load stats. (This is a whole art, beyond the scope of this article.)
Suddenly…
Determining which script changed an element's attribute
So, I had an issue where quite a while ago I added some js code that would open a [code]details[/code] disclosure element if it contained a named anchor that was included in the page's URL. For instance if you loaded the URL [code]https://thisdomain.com/somepage.html#blahblahblah[/code], and the page had [code][/code] hidden inside a closed [code]details[/code] element, it would open that element by setting the attribute "open" on the details element, and scroll to reveal the anchor.
The problem was, I needed to make some changes to how that code functioned, and I couldn't find where I had added the script that did that.
Long story short: I temporarily added this script to the head of the page, and then reloaded it with an #anchor added to the URL, in this case [code]https://michaelkupietz.com/literally-hundreds-capsule-reviews/#puzzlehead[/code]:
[code] // Override the open property setter to catch when…
I had an interesting problem where I set an image's CSS rules to display:fixed and it still scrolled with the page. Here's what I discovered:
In CSS, display:fixed means fixed with regard to the nearest ancestor stacking context, not necessarily to the page coordinates. You can reset the stacking context by adding a transform, will-change, or other attributes (list provided below) to an element. If an ancestor element resets the stacking context, any descendant of it with display:fixed will stay fixed with regard to it, but if it scrolls with the page, will scroll too.
Ditto for the CSS attribute z-index. A higher z-index is only in front of objects in its stacking context. A new stacking context, lower down on the page, can contain elements with a lower z-index but that nonetheless appear in front of it visually, because they're not in the same stacking context.
Josh Comeau's site…
Here’s a guide to all currently available CSS units, with explanations and common use notes. This includes all CSS units listed in MDN Web Docs as of 2025aug15.
Sections:
By Category Angle unitsUnfortunately this must be set by site, but on retina screens on MacOS, many browsers blur small images, such as 88x31 buttons.
You can overcome this, at least for the images on your site, by adding this CSS to your site:
img, div {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
}
You should add any element that might have a CSS background image property to that selector. In this case I have added
This tip is from https://stackoverflow.com/questions/31908444/fix-for-blurry-images-on-browsers-used-by-a-mac-retina
For confused first-time visitors and other people still acclimating, here is a description of these little tabs to the left, as well as some other features of the site.
Open "Expert Mode" CLI Navigation - this give you the option to switch your browser's display to an old-fashioned terminal mode where you may browse this site, view pages and images by typing text commands. Just like how we used to browse the web back in 1978!
Open Visual Settings - This gives you controls to customize the visual display of this website to your liking: turn up or down the brightness, contrast, color temperature, hue, saturation, dark mode, and earthquake. Settings are saved per browser tab, so they will be remembered for your whole visit.
Open My Eyes - Have you ever been engrossed in your work, when you suddenly realize someone is staring at your screen, watching everything you do over your shoulder? If not, this simulates the experience.
Open Help - This help popup, silly! You just clicked it! Do you not remember?
New - Draggable elements! Several elements on this website, including these tabs, this popup message, and the "Hire Mike" badge in the lower right, can be dragged around with your mouse, to avoid them blocking content. Positions are remembered per tab, so as you navigate around the site, they will stay in the same place for your whole visit.
Enjoy!
Are you sure you want to switch to viewing this website in the "expert mode" command-line interface?
This will switch to a terminal emulator, load this page, and allow you to browse this website and view its contents by typing text commands.
Plus there might be, y'know, some fun stuff hidden in there. Just for geeks.