#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

New #CSS featues should make our lives easier, right?

Except for when they're buggy. Just hit (and filed) a Chrome bug 🪲 https://issues.chromium.org/issues/405676714

Live test https://codepen.io/thebabydino/pen/qEBKRej

#bug #cssBug #chromeBug #code #coding #web #dev #webDev #webDevelopment #frontend

Help? How does the body background switch between purple and violet in actual Safari for you when checking a different radio button?

https://codepen.io/thebabydino/pen/oNrMXpJ

> abruptly, like it happens for me in Epiphany?
> or smoothly from left to right like on the test bar animating between teal & aquamarine?

Thanks!

#CSS #cssBug #Safari

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

Run, it's the invasion of the closing parenthesis!

A weird #ChromeDevTools bug 🤪 https://issues.chromium.org/u/1/issues/324827382

Live test https://codepen.io/thebabydino/pen/bGZmXbw

That CSS works just fine, producing the expected result cross-browser, the only issue is with what Chrome DevTools shows in those tooltips on hover. All fine in DevTools in Firefox & Safari (tested via Epiphany on Ubuntu).

cc @bramus

#css #bug #devTools #devToolsBug #cssVariables #cssVariablesBug #cssBug #code #coding #frontend #webDev #webDevelopment

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

Wow, WebKit moved fast on this! https://bugs.webkit.org/show_bug.cgi?id=265254

Remember, if you see a problem, at the very least say something!

#css #devTools #bug #cssBug #coding #frontend #webDev #webDevelopment