#cssbug — Public Fediverse posts

Fun Safari bug 🪲: `drop-shadow()` does't take transforms into account https://bugs.webkit.org/show_bug.cgi?id=218734 👀

#CSS #bug #cssBug #SafariBug #coding #web #dev #webDev #webDevelopment #code #frontend #cssTransform #cssFilter #filter

As exciting (and useful) all the new #CSS units are, it looks like things working as expected with them isn't a thing for now.

Safari has problems with `lh` https://bugs.webkit.org/show_bug.cgi?id=267185 and doesn't seem to support `cap` (at least from what I've tested in Epiphany).

#bug #cssBug #Safari #SafariBug #code #coding #cssUnits #frontend #webDev #webDevelopment

As exciting (and useful) all the new #CSS units are, it looks like things working as expected with them isn't a thing for now.

Safari has problems with `lh` https://bugs.webkit.org/show_bug.cgi?id=267185 and doesn't seem to support `cap` (at least from what I've tested in Epiphany).

#bug #cssBug #Safari #SafariBug #code #coding #cssUnits #frontend #webDev #webDevelopment

As exciting (and useful) all the new #CSS units are, it looks like things working as expected with them isn't a thing for now.

Safari has problems with `lh` https://bugs.webkit.org/show_bug.cgi?id=267185 and doesn't seem to support `cap` (at least from what I've tested in Epiphany).

#bug #cssBug #Safari #SafariBug #code #coding #cssUnits #frontend #webDev #webDevelopment

As exciting (and useful) all the new #CSS units are, it looks like things working as expected with them isn't a thing for now.

Safari has problems with `lh` https://bugs.webkit.org/show_bug.cgi?id=267185 and doesn't seem to support `cap` (at least from what I've tested in Epiphany).

#bug #cssBug #Safari #SafariBug #code #coding #cssUnits #frontend #webDev #webDevelopment

As exciting (and useful) all the new #CSS units are, it looks like things working as expected with them isn't a thing for now.

Safari has problems with `lh` https://bugs.webkit.org/show_bug.cgi?id=267185 and doesn't seem to support `cap` (at least from what I've tested in Epiphany).

#bug #cssBug #Safari #SafariBug #code #coding #cssUnits #frontend #webDev #webDevelopment

For inline elements, things get worse: the only available fix requires nesting in order to set the gradient clipped to text on child and the other, full coverage gradient on parent.

For ex, for such a link hover effect (https://css-tricks.com/taming-blend-modes-difference-and-exclusion/#aa-text-state-change-effect), we need a `<span>` in the `<a>`.

#bug #Firefox #FirefoxBug #CSS #cssBug #code #coding #frontend #web #webDev #webDevelopment #cssGradient

Re Firefox bug: workaround options.

In a lot of cases, an absolutely positioned pseudo covering the entire element's area https://twitter.com/anatudor/status/1478412237295566850 and placed behind with `z-index` will do.✅

Can't use `box-shadow`/ `border-image` since they get drawn *on top* of the gradient background clipped to `text`. 😞🫠

#bug #Firefox #FirefoxBug #CSS #cssBug #code #coding #frontend #web #webDev #webDevelopment #cssGradient

Another Safari bug 🪲 filed: incorrect `lh` (line-height) value used unless set on parent https://bugs.webkit.org/show_bug.cgi?id=267185

#css #bug #bugs #cssBug #code #coding #typography #frontend #Safari #SafariBug #webDev #webDevelopment