view this post in both a chrome-based browser and a non-chrome-based browser.
the mechanism is not especially fascinating — gecko (firefox) and webkit (safari) both support using an inline data: svg url for mask-image, whereas blink (chrome) does not. so there's an overlay with a "warning", and mask-image with a completely black mask that hides the whole thing. blink ignores it and shows the overlay, obscuring the text underneath. that's also why there's a gap under the "post" — the overlay takes up somewhat more space.
i originally wanted to use subgrid for this after discovering that it's still feature flagged in chrome (firefox shipped it in 2019), but cohost's css reformatter doesn't even recognize display: subgrid; as a valid property! it also won't allow display: none;, and i think it might strip duplicated properties, so that would make things more difficult
i also briefly considered using element(), but that requires an id which i almost certainly can't set myself, and anyway it's still prefixed in gecko, which feels like cheating
