Skip to content

Three CSS Fixes That Matter in the Safari 26.6 Release

Safari 26.6 shipped one WebAssembly tweak and eight bug fixes. Three are CSS, and they quietly change how zoom, anchored overlays and fonts behave.

· · 5 min read
A MacBook, an iPhone and an iPad on a desk showing the same calendar page

Safari 26.6 landed on July 27, 2026, and its headline is a WebAssembly options parameter. I read that sentence and nearly closed the tab. Then I got to the bug list, and three of the eight fixes turned out to be CSS problems that had been quietly changing what shipped stylesheets do on real devices.

So why write up a maintenance release at all? Because nobody else does. There's no feature to demo, and a fixed rendering bug still changes your site's behaviour on every updated device without you deploying anything, which makes it more urgent than a feature you get to adopt on your own schedule.

TL;DR: Safari 26.6 adds one WebAssembly change and eight bug fixes. Three of the fixes are CSS: the ic length unit scaling wrongly under page zoom, position-area failing to fall back on a scrollable body, and CSS zoom mangling font properties in iPad desktop mode (WebKit, 2026).

What Safari 26.6 Actually Shipped, and When

One feature, eight repairs, six platforms. The feature is a compileOptions parameter on WebAssembly.compileStreaming() and WebAssembly.instantiateStreaming(), which means Wasm JS String Builtins no longer force you back to non-streaming compilation. Useful, narrow, and not a design concern.

The repairs are spread across five areas, and the CSS group is the biggest one:

AreaFixes
CSS3
Service Workers2
Networking1
Web Extensions1
WebRTC1

It ships on iOS 26.6, iPadOS 26.6, visionOS 26.6, macOS Tahoe 26.6, and back to macOS Sequoia and Sonoma. That reach is why I'd treat this as a live change rather than something to check next quarter. Users on three-year-old macOS versions get the new rendering behaviour too.

Red neon lettering with its glow bleeding into the dark around it
Photo by Prateek Katyal on Unsplash

What Went Wrong With the ic Unit Under Page Zoom

One ic is the advance measure of the CJK water ideograph, U+6C34. It exists so a designer can say "this column is 20 characters wide" in a script where that's the meaningful measurement, rather than guessing in ems and hoping. When the browser can't work out that advance measure, the CSS specification tells it to assume 1em.

Safari 26.6 fixes a case where ic scaled incorrectly with page zoom, so it stopped equalling 1em the way the spec requires. Read that again with a zoom control in mind. A user at 125 percent got different column widths than a user at 100 percent, from the same stylesheet, with no media query involved.

Photo by tommao wang on Unsplash

Is this the most widely used unit in CSS? Obviously not. But zoom is an accessibility path, not an edge case, and a unit that drifts under zoom is a unit that breaks for exactly the people relying on it. If your type scale mixes relative units, the fix is a good excuse to re-derive your numbers rather than trusting the ones that happened to look right.

A bright red neon entrance sign hung against a dark ceiling
Photo by Star on Unsplash

Why the position-area Fix Matters More Than the Feature

Anchor positioning shipped in Safari 26.0, and it's the reason tooltips, popovers and dropdowns can finally position themselves against a trigger without a JavaScript library measuring rectangles on every scroll frame. The whole value proposition rests on the fallback: you declare a preferred position, and the browser flips to an alternative when the preferred one would overflow.

That fallback had a hole. Safari 26.6 repairs position-area fallback on a scrollable body, where fixed-position elements refused to flip at all. OddBird documented the same class of problem in their anchor positioning write-up: with a scrollable containing block, the fallback simply never triggered.

Photo by Vova Kondriianenko on Unsplash

A scrollable body is not an exotic condition. It's every long page you've ever built. So the practical shape of this bug was: correct CSS, correct fallback declaration, and a menu that ran off the bottom of the viewport anyway on one browser. Anyone who hit it probably blamed their own position-try-fallbacks and wrote a workaround. Delete the workaround.

Why iPad Desktop Mode Mangled Your Font Stack

Requesting the desktop website on iPad renders the page at a desktop viewport and scales it down, and that scaling shares plumbing with the CSS zoom property. Safari 26.6 fixes zoom interacting incorrectly with font-size, font-weight, font-variant and font-style in that specific mode.

Four properties. All typography. The symptom was type at the wrong size or weight on an iPad in desktop mode and correct everywhere else. When did you last check that mode? I've seen teams lose an afternoon to bugs shaped like this one, and the answer is usually not in their code.

What This Changes In Your CSS

Nothing you write. Everything you should check.

Retest these three things

  • Any anchored overlay (tooltip, dropdown, popover) near the bottom or right edge of a long scrolling page, in Safari specifically.
  • Your type scale at 125 and 150 percent browser zoom, if ic appears anywhere in it.
  • A representative page in iPad desktop mode, looking at weights and sizes rather than layout.

Feature-detect, don't version-sniff

None of this justifies a user-agent check. If you need to know whether anchor positioning is available at all, @supports (position-area: block-start) answers the question honestly and keeps working when Firefox and older Safari builds catch up. Version sniffing gets you a rule that's wrong on the next release, which is the same mistake people made writing up Chrome 150 features that actually shipped two versions later.

The wider lesson holds for any CSS layout system you maintain. Bug-fix releases move your rendering baseline silently, and relative units are the part most exposed. Define your sizing once and derive the rest, the way a fluid type scale does, rather than hand-tuning values per breakpoint until they look right on the machine in front of you.

Run the numbers yourself

The arithmetic above is easy to follow and easy to get wrong by a decimal place. Put your own sizes in below and the tool hands you the finished declaration, then drag the viewport slider to see where the curve flattens. It also checks the two limits this article cites, the 16px floor and the 2.5x ratio, while you type.

clamp() Live Preview

Enter the sizes you want at each end of your viewport range. The tool runs the slope arithmetic from the section above and hands you the declaration. Then drag the viewport slider and watch where it breaks.

Renders at 40.0px

1200px simulated viewport

Designing the edge cases

The same heading, sized by the declaration below. Drag the slider to the far left and read it as a phone would.

font-size: clamp(1.75rem, 1.333rem + 1.667vw, 3rem);

The preview sets a computed px size, not a live vw value: a real clamp() tracks the browser window, so inside an article column it could only ever show your own viewport. The declaration above is the real one, and it is what you ship.

Open the full clamp() preview for a wider stage, or the type scale calculator to generate the min and max for every step at once.

Frequently Asked Questions

Is there anything new to learn in Safari 26.6?
Almost nothing, and that's the honest answer. The release adds exactly one thing: a compileOptions parameter on WebAssembly.compileStreaming() and WebAssembly.instantiateStreaming(), which lets you pass something like { builtins: ["js-string"] } without dropping out of streaming compilation. If you don't hand-write WebAssembly, that line is not for you. Everything else in the release is repair work on things that already shipped. That still matters to a designer, because three of the eight fixes are CSS, and a fixed CSS bug changes what your existing stylesheet does on a user's machine without you touching a single line of it.
Do I need to change my anchor positioning code after this fix?
No, and that's the point. The bug was that fixed-position elements using position-area didn't fall back properly when the body was scrollable, so a tooltip or menu that should have flipped to its alternate position stayed where it was and ran off the edge. Correct CSS produced a wrong result. Safari 26.6 makes the same stylesheet behave. What you should do is retest: open any anchored overlay near the bottom or right edge of a long scrolling page and confirm the flip now happens. If you shipped a JavaScript workaround for this specific Safari behaviour, that workaround is now redundant, and leaving it in can fight the browser's own fallback logic.
What is the ic unit, and does it affect a Latin-only site?
The ic unit is the advance measure of the CJK water ideograph, U+6C34, so one ic is the width of one full-width character in the current font. It's built for sizing columns and gutters in Chinese, Japanese and Korean typesetting, where a line of eighteen characters is a real design decision. On a Latin-only site with a Latin-only font stack it still resolves, because the CSS specification says that when the ideographic advance can't be determined, the browser assumes 1em. That fallback is exactly what the Safari 26.6 fix restores under page zoom. So if you use ic anywhere, on any script, this fix changes your measurements at zoom levels other than 100 percent.
Why did iPad desktop mode break font properties in the first place?
Because requesting the desktop website on iPad is not a simple user-agent swap. Safari renders the page at a desktop-sized viewport and scales the result down to the physical screen, and that scaling runs through the same machinery as the CSS zoom property. Safari 26.6 fixes a case where zoom interacted incorrectly with font-size, font-weight, font-variant and font-style in that mode. The visible symptom was type that came out at the wrong size or the wrong weight on iPad and nowhere else, which is the worst kind of bug to chase, because it never reproduces on the machine you're designing on.