Ana Tudor 🐯Oct 1

Did you know you could get the number of `auto-fit` columns of a grid by dividing the grid width (known to the grid's children/ pseudos as `100cqw` if we make the grid a container) to the unit column width `--u`?

See the live demo on @codepen https://codepen.io/thebabydino/pen/zxGyRZX

No Firefox yet... and the bug 🪲 looks like it's dormant 😿 https://bugzilla.mozilla.org/show_bug.cgi?id=1827404

#CSS #layout #cssLayout #cssMaths #grid #cssGrid #code #coding #frontend #calc #web #dev #webDev #webDevelopment #CodePen #FirefoxBug #bug

PUPUWEB BlogAug 31, 2025

Firefox update causing chaos? Frozen toolbars & disappearing tabs linked to a "movingtab" bug. Workarounds: keyboard shortcuts (Ctrl+L/R), restart via about:profiles, or drag the tab. Devs are on it! #FirefoxBug #TechSupport

https://pupuweb.com/why-firefox-toolbar-frozen-tabs-disappear-unexpectedly-after-latest-update/

Why Is Firefox Toolbar Frozen And Tabs Disappear Unexpectedly After The Latest Update? - PUPUWEB

A recent update to the Firefox browser is causing problems for some people. If you use Firefox, you might have noticed issues yourself. These problems

PUPUWEB
Xanatos Jul 7, 2025

Just found my first Firefox bug which was reproducible.

It's an awesome feeling to know that you did help even if it is a small issue found.

#Firefox #BugReport #FirefoxBug

Show threadAna Tudor 🐯Sep 1, 2024

2️⃣ Then there's this Firefox bug some rando 🤪 filed over half a decade ago https://bugzilla.mozilla.org/show_bug.cgi?id=1481498

If we have multiple backgrounds and one is clipped to text, the top background layer image is painted all across the area of all the backgrounds stacked one on top of the other. 😭

#Firefox #bug #FirefoxBug #CSS #code #coding #frontend #web #dev #webDev #webDevelopment

1481498 - background-clip with multiple values fails when one value is text

NEW (nobody) in Core - Web Painting. Last updated 2024-12-18.

Show threadAna Tudor 🐯Aug 30, 2024

So apparently something got broken in Firefox Nightly (all fine in stable) - thanks @simevidas for pointing it out!

Filed a #bug:
https://bugzilla.mozilla.org/show_bug.cgi?id=1915924

#SVG #svgBug #Firefox #FirefoxBug #svgFilter #filter #code #coding #frontend #web #webDev #dev #webDevelopment

1915924 - feComponentTransfer with type='discrete' now gives incorrect result

NEW (nobody) in Core - Disability Access APIs. Last updated 2024-08-30.

Show threadAna Tudor 🐯Jun 18, 2024

I really meant to write "hello world" there, but "hell" isn't wrong, so I left it like that.

Anyway, you can find the bug links & all in the Pen description.

#SVG #svgFilter #filter #svgBug #bug #FirefoxBug #SafariBug #code #coding #textEffect #noise #grainy #frontend #web #webDev #dev #webDevelopment

Show threadAna 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 threadAna 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 🐯Apr 29, 2024

Pure CSS text effect https://codepen.io/thebabydino/details/XWQQRWG

No text duplication, no JS, no images save for CSS gradients, no SVG at all. Under 20 CSS declarations, including layout, prettifying, `@​media` queries, `@​supports` blocks, CSS variable declarations...

No Firefox (bug 🪲 1481498 ).

Heavily commented as well.

#CSS #textEffect #cssGradient #blending #blendMode #code #coding #frontend #webDev #webDevelopment #bug #Safari #SafariBug #FirefoxBug #Firefox #CodePen #noJS #noSVG #mediaQuery #typography

Pure CSS text effect (no Firefox)

No text duplication, no JS, no images save for CSS gradients, no SVG whatsoever. Under 20 CSS declarations, including layout, prettifying, `@media` que...

Ana Tudor 🐯Mar 6, 2024

And this means I've filed an #svgFilter #bug 🪲 in every major browser today https://bugzilla.mozilla.org/show_bug.cgi?id=1883933

Bottom line: almost nothing works cross-browser when it comes to SVG filters.

#SVG #CSS #filter #Firefox #FirefoxBug #code #coding #frontend #webDev #webDevelopment

1883933 - feDisplacementMap fails with feColorMatrix map input

NEW (nobody) in Core - SVG. Last updated 2024-04-10.