Mastodawn

Ana Tudor 🐯Apr 7, 2025

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

218734 – [TextureMapperGL] drop-shadow filter doesn't take transform into account

WebKit Bugzilla

Ana Tudor 🐯Mar 23, 2025

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

Chromium

Ana Tudor 🐯Aug 28, 2024

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

Switch background based on CSS variable

For reference: * [twitter](https://x.com/anatudor/status/1828667687586644149) * [mastodon](https://mastodon.social/@anatudor/113038035110362408) * [bl...

Show thread

Ana Tudor 🐯May 13, 2024

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

267185 – Incorrect lh (line-height) value used unless set on parent

Show thread

Ana Tudor 🐯May 10, 2024

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

Taming Blend Modes: `difference` and `exclusion` | CSS-Tricks

Up until 2020, blend modes were a feature I hadn't used much because I rarely ever had any idea what result they could produce without giving them a try

CSS-Tricks

Show thread

Ana Tudor 🐯May 10, 2024

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

Ana Tudor 🐯🖤🌻 (@anatudor) on X

#tinyCSStip Want your absolutely positioned pseudo/ child to cover its entire parent? ❌DON'T top: 0; left: 0; width: 100%; height: 100% or top: 0; right: 0; bottom: 0; left: 0; ✅ DO inset: 0 See it live on @CodePen: https://t.co/YLZXbayAeX

X (formerly Twitter)

Ana Tudor 🐯Feb 12, 2024

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