iiinova — where your digital self keeps evolving

Reposted by @bfgeek.bsky.social

Rick Byers @rbyers.net · 21/09/2026

Happy 25th birthday @igalia.com. I am so inspired by the lasting value you have contributed to the web and society at large, and even moreso by your unwavering values in implementing that work. Here's to the next 25 years indeed! www.igalia.com/2026/09/21/T...

igalia.com

Twenty-Five Years Upstream | Igalia

Igalia is an open source consulting firm specialised in the development of innovative projects and solutions. Our engineers have expertise in a wide range of technological areas, including browsers an...

1245

bfgeek.bsky.social @bfgeek.bsky.social · 20/07/2026

(Also thanks for reading my rant :)

000

bfgeek.bsky.social @bfgeek.bsky.social · 20/07/2026

Yeah thats especially tough, and somewhat comes with the baggage of the particular brand. (Which is why FWIW I think its useful for Blink to remain as open and independent as possible).

100

bfgeek.bsky.social @bfgeek.bsky.social · 20/07/2026

(I really just wanted to use a frame from the actual movie, but didn't feel like going down the "is this fair use" rabbit hole today).

000

bfgeek.bsky.social @bfgeek.bsky.social · 19/07/2026

I've have many conversations with people about what product quality actually is. I've found its one of the most poorly understood concepts in engineering. I finally took the time to write it up. bfgeek.com/product-qual... Let me know what you think!

bfgeek.com

What is Product Quality?

272

Reposted by @bfgeek.bsky.social

Joey Arhar @josepharhar.bsky.social · 14/07/2026

Hi! I'm working on a new HTML feature: filterable select There are two proposed API shapes so far: 1. Nesting <input> in <select> 2. Sibling <input> for listbox <select> w/id ref Option 1 is more ergonomic, but would break selects in older browsers Thoughts? (Both currently in Canary w/flag)

2211623

bfgeek.bsky.social @bfgeek.bsky.social · 02/07/2026

I'm so happy where calc-size() ended up. I know of a couple of issues I still need to sort out, but is in a very solid place. It's incredibly powerful. ❤️ for all the spec work, and ❤️ to @dbaron.org for the lions share of the implementation.

030

bfgeek.bsky.social @bfgeek.bsky.social · 01/07/2026

iOS/macOS being non evergreen is a big problem

110

bfgeek.bsky.social @bfgeek.bsky.social · 01/07/2026

I'm always worried wrt. dropping old MacOS support. So many people have Intel based Mac's that are or will be stuck soon.

120

bfgeek.bsky.social @bfgeek.bsky.social · 29/06/2026

I gained internet points! calc-size() is very powerful, I'm glad it turned out as well as it did. (there is an alternate universe where CSS never had min-width, etc - and instead one would write: width: calc-size(auto, clamp(100px, size, 300px)); which is verbose but interesting to think about).

0151

bfgeek.bsky.social @bfgeek.bsky.social · 26/06/2026

Even on the same browser+platform you'll get different rendering at different zoom levels. Try the above example on Safari at 100% zoom then 110%, etc.

010

bfgeek.bsky.social @bfgeek.bsky.social · 26/06/2026

+1 to what noam said. Shipping this will lead to frustrated developers as line-breaking between browsers is left unspecified. E.g. take this simple example: www.software.hixie.ch/utilities/js... If someone targets Blink they might get the correct rendering, but the other browsers will be "incorrect"

Rendering of the above example in Blink, WebKit, Gecko

210

bfgeek.bsky.social @bfgeek.bsky.social · 05/06/2026

I'm personally seeing this for Chromium as well. External PRs previously indicated non-trivial effort, and time invested in reviewing would often lead to higher quality PRs in the future. Now this is less true, review load has increased, but the chance of these PRs being accepted has decreased.

1161

bfgeek.bsky.social @bfgeek.bsky.social · 03/06/2026

overflow hidden just clips descendant overflow, not of the element itself. The class was basically exploiting a bunch of browser engine bugs circa 2012 to make it "work". But needs something like overflow-contribution to work properly: github.com/w3c/csswg-dr...

github.com

[css-overflow] add method to prevent elements from contributing to scrollable overflow · Issue #8361 · w3c/csswg-drafts

https://www.w3.org/TR/2022/WD-css-overflow-3-20221231/#scrollable Motivation Sometimes it's useful to prevent elements from contributing to the scrollable overflow area. In particular elements that...

010

bfgeek.bsky.social @bfgeek.bsky.social · 01/06/2026

It's not a bug. Visually-hidden doesn't actually prevent scrollable overflow (and hasn't for years). We need a new CSS property to do it correctly.

120

Reposted by @bfgeek.bsky.social

Brian Kardell @bkardell.com · 26/05/2026

New on the blog - Some (suprisingly fun) history of a CSS problem and a resolution that my colleague @andreubotella.com has been working on @igalia.com - we could use your help testing! bkardell.com/blog/GetClam...

bkardell.com

Get Clamped: Unwinding Some Difficult CSS History

Sometimes features take a long and winding road on the way to a good solution. We could use your help testing improvements for something that's been somehow developing for about a

12413

Reposted by @bfgeek.bsky.social

Brecht De Ruyte @utilitybend.com · 21/05/2026

🚀 New article on gap decorations (coming soon) in CSS. I have a small obsession with clean layout lines, and this is the first time it feels easy to draw them without polluting the markup. Goes through the new properties, a playground, and some experiments... 👾 utilitybend.com/blog/css-is-...

utilitybend.com

CSS is filling the gaps with rules. A way to style gaps in grid and flex. | utilitybend

A practical walkthrough of CSS gap decorations: column-rule, row-rule, rule-break, rule-inset, rule-visibility-items, repeat(), and animation.

45713

Reposted by @bfgeek.bsky.social

Kevin Babbitt @kevinbcmu.bsky.social · 15/05/2026

CSS Gap Decorations is shipping in Edge and Chrome 149! Really proud of all the work the team did to solve this longstanding web developer ask. developer.chrome.com/blog/gap-dec...

developer.chrome.com

Gap decorations: Now available in Chromium | Blog | Chrome for Developers

A new way to style gaps in CSS from Chrome and Edge 149.

2294

bfgeek.bsky.social @bfgeek.bsky.social · 15/05/2026

Congratulations to the Edge team for shipping this! Its an incredibly high quality implementation, and a lot of work and care went into the API design and implementation.

071

bfgeek.bsky.social @bfgeek.bsky.social · 24/04/2026

If you remove the `max-width` on the images then they'll always fill the line.

000

bfgeek.bsky.social @bfgeek.bsky.social · 24/04/2026

Opps I confused myself: `width: calc(100px * var(--ar))` will set the minimum row height to `100px`, all flex lines will be larger than that.

100

bfgeek.bsky.social @bfgeek.bsky.social · 24/04/2026

You can create more complex schemes but all the heights have to be the same before flexing (toggle off flex-grow)

100

bfgeek.bsky.social @bfgeek.bsky.social · 24/04/2026

You have to do it via the width. In the demo its currently `width: calc(20% * var(--ar))`. The `20%` is setting (effectively) the minimum height. With an aspect-ratio of 1, the minimum height of the line for 200px would be: `width: calc(200px * var(--ar))`.

100

bfgeek.bsky.social @bfgeek.bsky.social · 22/04/2026

It's pretty solid. I wrote a caveats section, but would mostly be fine. Demo only works with browsers that support attr(), but you can use script to pass the aspect ratio into CSS.

130

bfgeek.bsky.social @bfgeek.bsky.social · 16/04/2026

RIP the hacker-news test in Chromium: chromium-review.googlesource.com/c/chromium/s... (prior to hacker-news having a mobile friendly design, browsers used font-boosting to make it readable).

chromium-review.googlesource.com

000

bfgeek.bsky.social @bfgeek.bsky.social · 30/03/2026

Bonus: My favourite method in Blink is a "fused" MulDiv, e.g. Taking 3 fixed-points (32bits in size) to do the operation a * b / c. For a*b we temporarily bump up to 64bits so that we don't saturate for large values. We use this for aspect-ratio type things. source.chromium.org/chromium/chr...

source.chromium.org

Search and explore code

001

bfgeek.bsky.social @bfgeek.bsky.social · 30/03/2026

I wish that fixed precision was baked into programming languages at a slightly deeper level, rather than having to rely on decimal/etc libraries (Hi Rob! Thanks for Go!).

110

bfgeek.bsky.social @bfgeek.bsky.social · 30/03/2026

Everytime we use float because of convenience in Blink we end up having prevision bugs at largish values. Floating point is really only useful if you are doing operations around zero, e.g. half the values in fp are within -1.0 to 1.0. (I'm always suspect at projects like taffy which use f32).

github.com

GitHub - DioxusLabs/taffy: A high performance rust-powered UI layout library

A high performance rust-powered UI layout library. Contribute to DioxusLabs/taffy development by creating an account on GitHub.

100

bfgeek.bsky.social @bfgeek.bsky.social · 30/03/2026

Fun (obvious?) fact. Browser layout engines, text layout (harfbuzz) don't use floating point because its trash. Floating-point is really only useful if you are doing operations around 0. Instead we use fixed-point (Blink & WebKit use 1/64th base, Firefox 1/60th base). Harfbuzz uses 16.16

131

bfgeek.bsky.social @bfgeek.bsky.social · 30/01/2026

That'd be great! Exactly nailing down what people expect here is critical, e.g. a min number of items on the last line? Try to fill the last line by X%? Create a "taper"? A flex-break:avoid feature?

010

bfgeek.bsky.social @bfgeek.bsky.social · 30/01/2026

....agree to the right set of knobs, and heuristics otherwise browsers will just get bug reports "you don't match X for pretty" (From what I've seen the demand for flex is primarily balance, with pretty a secondary).

110

bfgeek.bsky.social @bfgeek.bsky.social · 30/01/2026

We can get around the differences in `pretty` behaviour for text layout, and text layout is highly platform/browser dependent, so rendering differently is ok, and having it underspecified is fine as well. Flex is a little different, and it renders exactly the same *everywhere*, so we'd need to...

120

bfgeek.bsky.social @bfgeek.bsky.social · 30/01/2026

And compared to balancing there are lots of different was to do this, e.g. a per break penalty, a per line penalty (which varies depending on the line), etc.

010

bfgeek.bsky.social @bfgeek.bsky.social · 30/01/2026

Yeah this type of thing is difficult as everyone has their own preferences over what the exact behaviour should be, e.g. just exposing a `flex-wrap: pretty` wouldn't be enough as some folks would be unhappy with not enough items, some too many.

220

bfgeek.bsky.social @bfgeek.bsky.social · 30/01/2026

Can you describe what you'd want pretty to do in more detail? Just prevent the last flex-line from having a single item? (Working out an exact algorithm for this is ironically more difficult than balance)

120

bfgeek.bsky.social @bfgeek.bsky.social · 05/01/2026

> Hyrum's Law This was my biggest fear when we lost EdgeHTML. We knew we shared *so many* layout bugs with WebKit that if that remained the status quo for too long we'd have to write a bunch of broken things into CSS specs. Fortunately we were quick enough rearchitecting everything.

020

bfgeek.bsky.social @bfgeek.bsky.social · 05/01/2026

My 2025 review which turned out to be more 6-7 things which I found interesting/fun over the year. bfgeek.com/2025-review/ Also a photo of me on a giant stick of butter. Read into that what you will.

bfgeek.com

Things I'm proud of in 2025

A review of various projects on Blink which I was proud of in 2025.

150

bfgeek.bsky.social @bfgeek.bsky.social · 13/11/2025

This was the cross-over I didn't know I needed.

050

bfgeek.bsky.social @bfgeek.bsky.social · 28/10/2025

If you wanted to drop by Mountain View I'd be happy to say hi if you have spare time.

110

Reposted by @bfgeek.bsky.social

bfgeek.bsky.social @bfgeek.bsky.social · 13/10/2025

Yes, but the browsers have implemented this optimization differently. WebKit/Firefox have the same optimization in that they use (effectively) a linked-list of HashMap(s). There are some performance cliffs with this - lookups can be slow, e.g. you check a HashMap, then check its parent, etc.

111

bfgeek.bsky.social @bfgeek.bsky.social · 13/10/2025

I should have started with, the initial implementations of custom properties just used a single HashMap, and copied at each level, but this was slow (both for copying the large HashMap, and comparing for invalidation purposes).

110

bfgeek.bsky.social @bfgeek.bsky.social · 13/10/2025

Lookups are generally fast as the trie is generally shallow (max depth of 8 nodes with a fanout of 4 bits, but often only 3-4 deep), and equality checking is relatively quick.

110

bfgeek.bsky.social @bfgeek.bsky.social · 13/10/2025

HAMTs are used often in functional language implementations, its main benefits are that it avoids the slow HashMap copies (you only need to copy part of the data-structure for mutating a single entry), and due to this more memory efficient.

110