I’m just adding this link here so I’ll be able to find it again.
https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working
A very good list of reasons why position: sticky might not be working, with explanations.
css
Grid With Columns of Equal Width
What:
I had a CSS grid with 5 columns that were supposed to all be the same width, except that one of them was bigger and I couldn’t figure out why.
The CSS I was using for the items in my grid was grid-template-columns: repeat(5, 1fr) and it clearly wasn’t working. Why not? And what to do about it?
pointer-events
What
How to click, tap or select one HTML object through another.
For example: I had an image and I wanted to show a caption and a link to the photographer on hover, but I also wanted the image to be clickable to open a bigger version in a modal/lightbox. pointer-events makes that possible.
Setting localStorage to Control Pop-ups
I added a simple pop-up to every page of a website but I didn’t want to bother visitors who had already seen it, so I used localStorage to prevent the pop-up from showing again if people closed the pop-up.
Background positioning
What:
How to position a background image relative to the bottom or right side of the screen
How:
.bgimg {
background-image: url('img.jpeg');
background-position: right 10% bottom 76px;
}The 10% is relative to the right of the screen, the 76px is relative to the bottom.
CSS Columns Across Browsers
What: When using CSS columns, the content doesn’t always line up at the top of each new column. The more columns you have, the more likely you are to run into this problem, especially if you’re using column-fill: balance. And the problem seems to happen in Chrome-based browsers, in Safari and in browsers on iOS.
Jittery Scrolling
What: Jittery Scrolling, or very slow scrolling in Chrome-based browsers. It’s caused by too many paint operations when scrolling, in my particular case caused by an SVG set as a background-image with background-size: cover and background-attachment: fixed.
Media Queries for Input Devices
What: Since not every touch enabled device is a handheld device, checking for size and checking for touch should be handled separately, since the changes to the design and functionality they require are not the same.
How: You can use media queries.
scroll-margin-top
What: CSS-Tricks just posted about this last Friday and since I could have used this that day (!) but didn’t find it until now, I’m adding a note here for myself:
You have a page with a table of contents (with links), or you have a one page website with in-page navigation and you have a fixed header — when you click a link the content scrolls up too far and is hidden by the fixed header. This is not a good user experience, and you can improve it with scroll-margin-top in Firefox and Chrome-based browsers…