Safari 27 beta is here. Don’t miss our WWDC26 sessions on web technology, including What’s new in WebKit for Safari 27, to go deeper on our work in this release. Now, let’s dig into this beta, packed with 58 new features, 525 fixes and 4 deprecations that will hopefully make your work as a web developer a little easier.
Here’s a sneak peek of the highlights:
<select> to style your form elements to match the rest of your site or app without rebuilding it in JavaScript or sacrificing accessibility. :heading pseudo-class, the revert-rule keyword, and the stretch keyword for box sizing all land in CSS. And that’s just the start.
If you look through the lists of features and fixes in Safari 27, you’ll notice that, although there are 58 brand-new features and 525 fixes — the largest pile of fixes in any Safari release in recent memory — most of what is released is not about new things.
Most of this work has been about existing features behaving more correctly, handling more edge cases, and fitting together with other features the way you’d expect. We committed our time to increasing quality — that’s the story of this release and the year that led to it.
A lot of this work was also about aligning to web standards. When we found a spec that was unclear or incomplete, we helped update it, and then updated WebKit to match.
For example, Safari 27 contains 30 SVG fixes, including updates based on recent decisions in SVG 2 where we revived the Working Group. SVG is used on 67% of webpages, making this work very impactful. Anchor positioning continues to get refined as the CSS specification settles. And in more subtle places throughout the release — URL parsing details, event listener options, timezone identifier handling, innerText edge cases — features that look unchanged on the surface now behave the same way in Safari as they do in Chrome, Firefox, and Edge.
We also spent time making sure features still work across different contexts. A :has() selector invalidating properly when siblings change. An aspect-ratio resolving correctly against a percentage height. box-shadow rendering correctly on table-row elements. background-clip: text working on table header elements. Bugs that appear when combining features are among the hardest to find and the most frustrating, but we’ve made significant progress in hunting them down.
If something has been bothering you, test it in Safari 27 beta. You might be pleasantly surprised. And if it hasn’t been fixed yet, file a bug report, or add a comment to an existing issue with a concrete scenario, a link to a real site, or a reduced test case. The more concrete the problem, the more helpful it is.
This work goes beyond the Safari browser. When your customers open their news app, their banking app, their shopping app, there’s a good chance the interface they interact with is powered by the HTML, CSS, and JavaScript that’s rendered by WebKit and JavaScriptCore — the same engines inside Safari. Every fix in this release isn’t just for the browser — it benefits everything the web platform touches.
Let’s dive in.
Safari 27 beta adds support for customizable <select> , which transforms the <select> element. You can now build a fully custom form element that matches the look and feel of your website or web app, without reaching for a JavaScript library or sacrificing the accessibility, reliability, and native platform integration of a real HTML form control.
Use the new appearance: base-select to clear the native styling and start with a clean palette. Then insert any additional CSS you want to create your custom design. Customizable <select> comes with new pseudo-elements for more granular control, like ::picker-icon to target the disclosure indicator and ::checkmark to target the checkmark that appears next to the selected <option>. Both can be fully customized.
Use the new <selectedcontent> element inside the button to display the currently selected option’s content and style <selectedcontent> directly to get it to look exactly how you want in the closed state.
And because you’re still working with a real <select>, everything that comes with a native form control still works: keyboard navigation, screen reader support, form submission, validation, change events. You get the styling freedom of a custom widget with the power of a native HTML element.
Customizable <select> is a multi-vendor effort. The same syntax is coming to other browsers. Use progressive enhancement and style your <select> with appearance: base-select for a great experience in browsers that support it, and let browsers that don’t fall back to their built-in rendering.
Learn more in the WWDC26 session Rediscover the HTML Select Element, where Tim walks through the full API and how to build layouts inside options with Grid and Flexbox.
<select multiple> did not always fire onchange when the mouse button was released far outside the element. (173882861)<select> control rendering was broken in vertical writing mode. (174068353)<select> elements with thousands of <option> children via innerHTML caused O(n²) overhead due to repeated list recalculation. (174244946)<option> elements to correctly implement the HTML specification’s dirtiness concept for tracking user-modified selected state. (175306111)<select> element is anchor positioned. (175454476)display value for <optgroup> and <option> elements to block, matching the behavior of other browsers. (175473184)<option> and <optgroup> elements to match the :disabled pseudo-class when inside a disabled <select>. (176559708)Safari 27 beta adds the animation property to the AnimationEvent and TransitionEvent interfaces, letting event handlers directly access the Animation object associated with the event.
animation-fill-mode did not correctly apply viewport-based units after the viewport was resized. (80075191)!important declarations did not override CSS animation values when CSS transitions were also running on the same property. (174367827)Safari 27 beta adds support for transform-aware anchor positioning. Now, when an anchor element has a CSS transform applied — scale, rotate, translate, or any combination — elements positioned relative to that anchor follow its transformed position instead of its pre-transform layout position. This works for transforms applied via the transform property as well as through the individual translate, rotate, and scale properties.
This closes a long-standing gap in the anchor positioning story. If you use anchor positioning to attach a tooltip, popover, or annotation to a transformed element, it now tracks correctly, even with animated transforms.
Safari 27 beta adds support for the :heading pseudo-class, which matches any heading element — <h1> through <h6>.
Instead of writing h1, h2, h3, h4, h5, h6 in your selector list, you can just write :heading. And :heading can also be combined with functional selectors to target headings at specific levels:
The revert-rule keyword is now supported in Safari 27 beta. Like revert and revert-layer, revert-rule rolls back the cascade — but specifically to the state as if the current style rule had not been present.
It gives you a more precise tool for working with overrides, especially in component libraries and design systems where you want to selectively undo declarations within a rule without losing the rest.
Safari 27 beta adds support for the stretch keyword in box sizing properties like width, height, min-width, and so on. stretch tells an element to fill the available space in the relevant axis, accounting for margins.
.card {
width: stretch;
}
Previously, the common way to achieve this was width: 100% — which doesn’t account for margins and can cause overflow when margins are applied. The stretch keyword does the right thing. If you’ve been using -webkit-fill-available as a workaround for the same behavior, now is a good time to switch.
The Dutch IJ digraph is now available in Safari 27 beta. When the content language is Dutch (lang="nl"), text-transform: capitalize and ::first-letter now correctly titlecase “ij” to “IJ” at the start of words.
A small but genuine improvement for anyone writing Dutch text on the web.
Safari 27 beta adds support for position-anchor: normal and position-anchor: none. Before, position-anchor defaults to auto, which makes every element use the implicit anchor element as its default anchor, if one exists. This has a side effect of changing an element’s positioning behavior, whether it uses anchor positioning or not. This may result in compatibility problems.
To fix this, the CSS Working Group has added two values to position-anchor to allow opting out of the new behavior:
none: an element does not have a default anchor, and its positioning behavior is unchanged.normal: auto if an element uses position-area, otherwise none.position-anchor: normal is the new default value, replacing auto. This means elements will only have a default anchor and get anchor positioning behavior if it uses position-area, otherwise its behavior remains unchanged.
Safari 27 beta adds support for anchor-valid and anchor-visible . Originally, position-visibility: anchors-valid hides an element if any of its required anchor references can’t be resolved. However, it was not clear what constitutes “required anchor references”. The CSS Working Group has since then changed its behavior to only look at the default anchor box. To match the new behavior, some keywords also got renamed to drop the plurality:
anchors-valid is renamed to anchor-validanchors-visible is renamed to anchor-visibleSafari 27 beta aligns with the new behavior but also still supports the old keywords for compatibility.
Safari 27 beta adds support for contain: style applying to CSS quotes. This allows you to scope effects of quotes to a certain subtree.
Safari 18.4 added support for text-autospace to control spacing between Chinese/Japanese/Korean (CJK) and non-CJK characters. Safari 27 beta now adds the insert keyword, making the following syntaxes equivalent:
text-autospace: ideograph-alpha ideograph-numeric insert text-autospace: ideograph-alpha ideograph-numeric -webkit-text-fill-color incorrectly overrode text-decoration-color. (47010945)shape-outside computing incorrect text wrapping in RTL writing modes. (56890238)flex-basis instead of the specified value for definiteness evaluation. (85707621)outline: auto on macOS. (94116168)box-shadow did not work on display: table-row elements. (96914376)text-indent with calc() containing percentages to correctly treat percentage components as zero for intrinsic size contributions. (97025949)fit-content. (97492632)clip-path: inset() border-radius values did not render correctly at certain element and clip-path sizes. (110847266)-webkit-box flexbox emulation not sizing children correctly inside <fieldset> elements. (114094538):where and :is selectors. (114904007)display: table could have incorrect layout when borders were present. (116110440)font-family serialization to preserve quotes around family names that match CSS-wide keywords or generic families. (125334960)border, position: absolute, and aspect-ratio: 1 were not rendered as squares. (126292577)perspective-origin failed to resolve var() references when used as the second value, preventing animations from being applied. (131288246):focus-visible incorrectly matching after a programmatic focus() call triggered by clicking a button with child elements. (134337357)min-height. (134356544):has() selectors could freeze. (138431700)unicode-range. (140674753)@media (prefers-color-scheme: dark) inside an iframe did not match when the iframe’s color-scheme was set to dark. (142072593)background-clip: text did not work on table header elements. (142812484)width: 0 did not collapse a table cell to its minimum size. (142814603):has(:empty) continued to match after the targeted element’s content was dynamically changed to no longer be empty. (143864358)text-transform on elements with ::first-letter styling. (145550507)height: max-content resolved to zero on absolutely positioned elements when a child had max-height: 100%. (147333178)inline-flex container with flex-direction: column did not update its width to match the intrinsic size of a child image when the image was not cached. (150260401)zoom interacting incorrectly with font-weight, font-style, and font-variant on iPad. (152173269)aspect-ratio enforced the automatic minimum size even when min-width was explicitly set to 0. (156837730):has() style invalidation performance for selectors where :has() is in non-subject position. (163512170)border-width value types. (168240347)inset box-shadow was incorrectly positioned on table cells with collapsed borders. (169254286)position-try-order to interpret logical axis values using the containing block’s writing mode instead of the element’s own writing mode. (169501069)fit-content, min-content, max-content) incorrectly resolved against the containing block’s height instead of being treated as auto. (171179193)@scope styles did not apply to slotted elements in web components. (171383788)nowrap minimum width calculation quirk was applied outside of quirks mode. (171410252)contain: layout caused significantly slower forced layouts when all siblings created their own formatting context. (171545381)::first-letter styling. (171649994)color-scheme did not repaint iframe background. (171658244)position: absolute. (171735933)color: initial resolved to the wrong color when the system is in dark mode. (172320282)display: contents did not establish an anchor scope when using anchor-scope. (172355302)<general-enclosed> in media queries to reject content with unmatched close brackets per the <any-value> grammar. (172575115)rlh unit was double-zoomed with evaluation-time CSS zoom. (172798163)outline: auto to correctly respect zoom. (173068660)outline-offset to work correctly with outline: auto on iOS. (173130230):active, :focus-within, and :hover pseudo-classes to correctly account for elements in the top layer. (173145294)ic length unit was incorrectly affected by page scaling. (173198587)shape() function to omit default control point anchors in computed value serialization per the CSS Shapes specification. (173233716):focus-visible instead of :focus. (173321368)lh and rlh units resolved with double-zoom when line-height was a number value. (173448638)outline-width to be ignored when outline-style is auto, matching the specification. (173567890):in-range and :out-of-range pseudo-classes for time inputs with reversed ranges. (173589851):placeholder-shown to correctly match input elements that have an empty placeholder attribute. (173604635)font-size: 0. (173840866)getComputedStyle() to be zero, if the element uses position-area or anchor-center. (173885561)position-area not being able to anchor to an element positioned using anchor functions. (173964030):in-range and :out-of-range pseudo-classes to correctly update when the readonly attribute changes. (173978657)view-timeline-inset serialization failed to coalesce identical values. (174096313)url() token serialization in CSS custom properties. (174144616)text-autospace to correctly handle supplementary Unicode characters. (174148315)order values caused incorrect baseline alignment. (174241817)::first-letter text showed a pointer cursor instead of the expected I-beam cursor. (174258447)display: grid on a <fieldset> element added extra unnecessary space below its content. (174301311)outline-style. (174328839)aspect-ratio was not honored when the page was zoomed in. (174361289)height: 100% on a child element altered the layout when the parent’s height was defined via aspect-ratio. (174448267)document.styleSheets and shadowRoot.styleSheets incorrectly included adopted style sheets, which per the CSSOM specification should only appear in the final CSS style sheets list used for style resolution. (174583340)::selection and ::highlight to disallow vendor-prefixed properties, aligning with the CSS Pseudo-Elements specification. (174590593)FontFace.loaded to reject when a local() font source fails to load. (174631384)word-break: break-all incorrectly allowed CJK close punctuation to appear at the start of a line. (174656971)word-break: keep-all incorrectly suppressed line break opportunities at CJK punctuation characters. (174658701)FontFace constructor to reject with a SyntaxError instead of a NetworkError when a BufferSource fails to parse, per the CSS Font Loading specification. (174669738)FontFace family attribute to return the serialization of the parsed value. (174698351)calc() values for the specified size suggestion. (174863227):has() sibling invalidation issues related to relation forwarding. (175006235)min-width: auto was not correctly computed for flex items. (175157619)margin-trim: block-start did not apply to blocks nested inside inline boxes. (175162899)display: contents on a <fieldset> legend caused incorrect rendering. (175163337):has() invalidation performance by including the full selector context in invalidation selectors. (175177078)@import URLs against the <base> element URL. (175305190)-webkit-box flex distribution for children with orthogonal writing modes. (175323734)calc(infinity) as a flex-grow factor not stretching a flex item to 100% width. (175431146):has() sibling invalidation failing due to an internal bitfield overflow, causing stale styles when siblings are added or removed. (175433733):has() invalidation for sibling combinators when elements are inserted or removed from the DOM. (175441568)transition-property not preserving the specified case of <custom-ident> values during serialization. (175467206)will-change property not serializing correctly when used with non-property identifiers or identifiers in a non-standard case. (175482352)top and bottom values on relatively positioned elements not resolving when the containing block has aspect-ratio. (175502356)<select> element to use self- keywords for anchor positioning. (175505107) Fixed text-indent computation when tab stop positions are involved. (175529961)calc() margin computations in flex layout. (175532405)calc() margin computations for block, fieldset, and table caption layouts. (175548980)<li> value attributes in reversed ordered lists. (175558324)sibling-index() and sibling-count() inside calc() functions to be correctly simplified. (175590806)sibling-index() and sibling-count()to correctly return 0 when used in cross-tree ::part() styling. (175592607)resize handle not working on an element when the handle overlaps a child iframe. (175621855)calc() margins or padding lost the fixed component during intrinsic width computation. (175669222)margin-start incorrectly overlapping adjacent floats. (175669464)aspect-ratio calculations for block-level elements with size constraints. (175669713)aspect-ratio calculations for flex items with percentage cross-size constraints. (175669774)aspect-ratio calculations for flex items with definite cross-size values. (175690028)revert-layer computing incorrectly when there is a leading empty or space substitution value. (175729680):has() invalidation incorrectly resetting sibling relation bits, causing style invalidation failures for first-in-sibling-chain elements. (175738008)min-height: min-content were incorrectly treated as scrollable, zeroing out their minimum size. (176173688):has() invalidation performance when used inside nested :is() selectors. (176354723)sibling-count() & sibling-index() used in @keyframes to re-resolve when siblings change. (176531901)Scroll anchoring is now supported in Safari 27 beta. When content is inserted or removed above the current viewport position — an image loads, an ad injects, a comment appears — the browser automatically adjusts the scroll position so the content you’re reading stays put instead of jumping.
This is an improvement you’ll feel on many sites, especially ones with lazy-loaded images, infinite-scroll feeds, or dynamically injected content. Most sites get this for free — no opt-in required.
Scroll anchoring is controlled by the overflow-anchor CSS property, which defaults to auto. If you have a specific element where you need to opt out of scroll anchoring, set overflow-anchor: none.
scrollTo during a momentum scroll incorrectly interrupted the scroll, ensuring that momentum scrolling continues as expected and smooth scrolling behaves properly. (41949531)scroll-snap-type: mandatory failed after the browser chrome was hidden. (100727098)scroll-padding did not scroll the focused element into view. (147513379)window.scrollTo() was called synchronously with a DOM layout change. (173197381)scrollIntoView() on a scrollable element incorrectly scrolled the element’s own contents. (174173683)The auto keyword in the sizes attribute on <img> elements is now supported in Safari 27 beta.
<img src="photo.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="auto"
loading="lazy"
alt="A mountain landscape">
When an image uses loading="lazy" and you don’t know its rendered layout width ahead of time, sizes="auto" tells the browser to calculate the size automatically based on the actual layout width once it’s known. This makes responsive images work correctly for images inside layout containers with dynamic widths.
Safari 27 beta adds support for the shadowrootslotassignment attribute on declarative shadow roots. This lets you configure the slot assignment mode (named or manual) directly in HTML when defining a shadow root declaratively, matching the JavaScript attachShadow({ slotAssignment: "manual" }) option.
map element without a name attribute did not match its associated image using the id attribute. (12359382)<meta> parsing to correctly treat form feed as ASCII whitespace per the HTML specification. (108440799)javascript: URLs to align with the specification. (147612682)<iframe> using the srcdoc attribute did not render. (167917471)<body>, <iframe>, and <frame> elements. (171240848)replaceWith() stopped processing remaining nodes if a script in the replacement removed a sibling. (172753019)disabled attribute. (173378582)rel attribute on an <a> element multiple times did not clear prior link relations. (173567839)<li> elements. (173983892)<object> elements, aligning with other browser engines. (174537345)window.open() to correctly consume user activation when creating a new browsing context, aligning with the HTML specification. (174587258)<img sizes="auto"> to fully align with the specification. (174684058)dir=auto on <slot> elements did not update when slotted content changed. (174871706)<option> elements rendered incorrectly when the label attribute was empty. (174979446)<source> elements with an empty type attribute inside <picture>. (175094037)innerText to emit a newline for empty <option> or <optgroup> inside <select>. (175245381)+ sign. (175300431)innerText to no longer emit newlines for visibility: hidden block elements. (175569426)innerText to correctly emit blank lines around <p> elements regardless of their CSS display value. (175729427)innerText on tables to no longer emit spurious trailing newlines and to preserve row-exit newlines after empty rows. (176635985)srcset attribute into a dynamically created iframe resulted in an invisible image. (66849050)naturalWidth and naturalHeight returning incorrect values for SVG images without intrinsic dimensions. (141196049)img element did not update its image data. (172856773)Safari 27 beta includes a complete standards-compliant rewrite of the ECMAScript module (ESM) loader. The new loader is implemented in native C++ and conforms directly to the ECMAScript specification’s module loading algorithms, replacing an earlier implementation based on an abandoned 2016 WHATWG Loader proposal that predated top-level await entirely.
The rewrite fixes module execution ordering and initialization issues that could cause imports to access exports before they were fully evaluated. It was validated against test262, the Web Platform Tests, and additional test cases.
Top-level await is a foundational feature of modern JavaScript module authoring, and it’s been a real pain point in Safari for a while — a known source of cross-browser bugs that developers building module-based apps had to work around. This fix closes that gap.
%TypedArray%.prototype.subarray to calculate beginByteOffset correctly to align with ECMA-262. (168143600)RegExp.prototype[Symbol.split] to align with ECMA-262. (168288878)Array.prototype.concat to correctly handle arrays with indexed accessors, preventing getter reentry from bypassing Symbol.isConcatSpreadable checks. (172237596)[[Set]] to check the receiver before writing to the typed array. (173386404)%ArrayIteratorPrototype%.next() to return { done: true } instead of throwing a TypeError when the source TypedArray is detached and the iterator has already completed. (173759106)import { "*" as x } was incorrectly treated as a namespace import instead of a named import using the string “" as a ModuleExportName. (174314099)RegExp.prototype.exec and RegExp.prototype.test could match against a stale pattern if lastIndex has a valueOf that calls RegExp.prototype.compile. (174461752)Intl.Segmenter with granularity: "word" incorrectly reported isWordLike: false for numeric segments. (175057894)Object.defineProperties to call Proxy traps in the correct order. (175068687)Intl.Locale did not canonicalize before overriding the language. (175092327)Intl.DateTimeFormat to preserve the original legacy timezone identifier instead of replacing it with the primary IANA ID. (175206605)Promise.prototype.finally to throw a TypeError when @@species is not a constructor, matching the behavior of other browsers. (175290627)/v flag. (175559808)TypedArray.prototype.lastIndexOf by adding SIMD-accelerated reverse search for numeric types. (175904377)exportstatements was significantly slower than necessary. (175949532) Fixed DataView constructor to match specification-defined argument validation order and error throwing behavior. (176110210)Array.prototype.concat could produce incorrect results when combining arrays with incompatible indexing types. (176219964)Safari 27 beta adds support for WebAssembly JavaScript Promise Integration (JSPI). JSPI lets synchronous-looking WebAssembly code suspend and wait for JavaScript Promises, making it much easier to port existing C, C++, Rust, and other language code to the web where that code expects synchronous I/O.
Before JSPI, porting code that called synchronous APIs to Wasm required rewriting everything on top of a callback or async state machine. With JSPI, the Wasm module can suspend at a call site and resume when the Promise resolves — the rest of the module sees straight-line synchronous code. This is a significant capability for the Wasm ecosystem.
WebAssembly.Suspending and WebAssembly.SuspendError to be data properties instead of getter functions, aligning with other WebAssembly attributes like WebAssembly.Module. (170155726)IntegerOverflow exceptions thrown by i32.rem_s, i64.rem_s, i32.div_u, i64.div_u, i32.rem_u, and i64.rem_u when both operands are constants. (175122462)RegisterSet::normalizeWidths() lost vector-width information, causing v128 argument corruption in WebAssembly SIMD thunks. (176035764)Safari 27 beta now supports multiple-character operators in MathML, improving the rendering of complex mathematical notation that uses operators like ++, :=, /=, and similar. We also updated operator dictionary to MathML Core, so that we also support multi-character, combining character, and updated operator dictionary.
Safari 27 beta now supports tabindex, focus(), blur(), and autofocus on MathML elements, improving MathML feature parity’s with HTML. This makes math content fully participate in keyboard navigation and focus management, which supports interactive educational content and accessibility.
<mo> element attributes did not trigger a relayout. (170907029)minsize and maxsize defaults and percentages did not use the unstretched size as specified. (170908253)<mprescripts> element within <mmultiscripts> layout. (170909975)<none> and <mprescripts> elements were not laid out as <mrow> elements in MathML. (170940035)-webkit-text-fill-color when painting math variant glyphs. (172020318)padding and border rendering on <msqrt> and <mroot> elements and corrected token sizing for mathvariant. (173081436)tabIndex values not being set correctly for MathML elements. (174734133)
Safari 27 beta in visionOS 27 adds support for immersive website environments. Developers can now provide incredible immersive experiences with a simple <model> element and one JavaScript API call. The Immersive API on the model element works similarly to how the Fullscreen API does on video elements. Learn more in the WWDC26 session Explore immersive website environments in visionOS.
Consider what this makes possible in a browser: a ticketing site where you can see the view from your seat before you buy, or a hotel that lets you walk the room, all built with standard web technology, no app required.
Safari 27 beta in visionOS 27 adds support for the controls attribute on <img> elements displaying spatial and panorama photos. When applied, the image gets native interactive controls appropriate for the content type, allowing the image to be viewed spatially or immersively wrapped around the user.
The <model> HTML element is now available in Safari on iOS, iPadOS, and macOS, joining its existing availability in visionOS. Web developers can now embed interactive 3D content using standard HTML across Apple platforms.
<model src="teapot.usdz"></model>
Learn more in the WWDC26 session Get started with the HTML Model Element.
Safari 27 beta adds support for dynamic-range-limit on the <model> element, giving you control over the HDR rendering range for 3D content in iOS and macOS.
<model> elements displaying at 100x the expected size for assets authored in tools that use centimeter units. (167805672)getViewport() was called. (168125694)<model> element stagemode orbit physics behaved differently between iOS and visionOS. (172189776)Safari 27 beta now supports the clip_distances built-in value in WGSL shaders. Clip distances are a WebGPU feature that allows vertex shaders to define custom clipping planes, enabling you to discard geometry on one side of an arbitrary plane before rasterization occurs.
compressedTexImage not validating whether the compressed texture format extension has been enabled. (175652171)texImage functions reporting errors with incorrect function names. (175652807)GPUDevice.onuncapturederror event handler attribute not working. (149577124)maxStorageBuffersInFragmentStage and related WebGPU limits. (160800947)GPUTexture objects instead of GPUTextureView with multisampled resolve targets in render passes. (175452924)Safari 27 beta supports setting TextTrackCue.endTime to Infinity to represent an unbounded cue duration. It’s useful for captions or data cues of live streams.
preservesPitch and playbackRate were not correctly handled on an HTMLMediaElement connected to an AudioContext via createMediaElementSource. (93275149)MediaCapabilities.decodingInfo() incorrectly reporting VP8 in WebM as not supported. (127339546)VideoDecoder API output frames in an incorrect order for videos containing B-frames. (145093697)<source> element does not match the actual content type served by the server. (166181001)HTMLMediaElement.currentTime to report smoothly progressing values instead of updating only at fixed intervals. (170115677)decodeAudioData. (170196423)VideoFrame constructor did not handle the video color range correctly for NV12 (I420 BT601) video frames. (170299037)MediaSource. (171210968)currentTime getter to return defaultPlaybackStartPosition when no media player exists. (171722368)HTMLMediaElement to fire a timeupdate event when resetting the playback position during media load as required by the specification. (171785463)preload attribute was not properly updated when the autoplay attribute was set. (171883159)HTMLMediaElement.volume had no effect when the element was connected to an AudioContext. (174278899)ImageCapture to correctly queue takePhoto() and applyConstraints() requests to avoid concurrent capture session reconfiguration. (174950018)VTTCue text content. (175084171)::cue() selectors to correctly match the WebVTT root object in addition to child nodes. (175550173)currentTime on iOS to update more frequently during media playback. (175774587)readyState not being updated immediately when playback stalls due to a gap in buffered data. (176330683)Safari 27 beta adds support for the Service Worker static routing API. This lets a service worker declare routing rules that the browser can use to bypass the service worker entirely for certain requests, reducing overhead for high-performance PWAs.
Safari 27 beta adds support for creating dedicated workers inside shared workers, per the HTML Standard.
Safari 27 beta adds three improvements to ReadableStream:
for await...ofconst response = await fetch("/data");
for await (const chunk of response.body) {
process(chunk);
}
ReadableStream.from() static method for creating a stream from any async iterable or iterableconst vegetables = ["Carrot", "Broccoli", "Tomato", "Spinach"];
const asyncIterator = (async function* () {
yield 1;
yield 2;
yield 3;
})();
// Create ReadableStream from the array
const myReadableStream = ReadableStream.from(vegetables);
// Create ReadableStream from async iterator
const asyncReadableStream = ReadableStream.from(asyncIterator);
ReadableStream , WritableStream and TransformStream across contexts via postMessage()history.state being set to null when history.pushState is called from a child iframe. (50019069)activeElement. (92367314)change event was not fired on <input> and <textarea> elements when they lost focus while another application was in the foreground. (98526540)SharedArrayBuffer where [AllowShared] is not specified. (107786134)MouseEvent.offsetX and MouseEvent.offsetY were not relative to the padding edge as specified. (125763807)gamepadconnected event did not fire unless gamepad permission had already been granted. (141623162)CSPViolationReportBody did not include the source line number in Content Security Policy violation reports. (152607402)toolbar.visible, statusbar.visible, menubar.visible) to return static values per the HTML specification for privacy and interoperability. (166554327)DigitalCredential protocols by gracefully filtering them out and showing a console warning instead of throwing an error. (166673454)DigitalCredentialRequest to DigitalCredentialGetRequest per the latest specification. (167115220)layerX and layerY to return correct values with CSS transforms. (168968832)location.ancestorOrigins returning stale origins after an iframe is removed from the document. (169097730)NavigateEvent.canIntercept to correctly return false when navigating to a URL with a different port, aligning with the Navigation API specification. (169845691)NavigateEvent.navigationType to return "replace" when navigating to a URL that matches the active document’s URL. (169999046)dragend event had incorrect coordinates when dragging within a nested <iframe>. (170750013)navigation.currentEntry.key did not change in private browsing windows after calling history.pushState(). (171147417)ResizeObserver callbacks became increasingly sluggish over time. (172718139)IntersectionObserver became sluggish over time when observing many elements due to O(n²) iteration. (172727210)navigation.currentEntry.id did not change in private browsing windows after calling history.replaceState(). (172897962)document.open() incorrectly aliased the caller’s security origin. (173369038)history.replaceState() on a traversed history entry incorrectly changed navigation.currentEntry.key to a new UUID instead of preserving the original key. (173388766)Object.prototype could not be serialized by structuredClone(). (173728983)once and passive flags were not preserved when copying listeners between elements. (173834642)get() request. (173918198)event.target was not set after dispatching an event in a shadow tree with no listeners. (174136382)navigator.credentials.create() and navigator.credentials.get() discarded the AbortSignal reason and always rejected with a generic AbortError. (174220589)Range.extractContents() to not extract out-of-bounds nodes when the end container is removed during extraction. (174307275)document.createEvent() to throw an exception for "MutationEvents", "MutationEvent", "PopStateEvent", and "WheelEvent", aligning with other browser engines. (174339775)ParentNode.append() to correctly de-duplicate nodes when the same node is passed multiple times. (174365465)MutationObserver delivered childList records in the wrong order when script ran during node insertion. (174368989)URL object’s port property to whitespace behaved incorrectly. (174484035)return in the Navigation API’s performTraversal that caused incorrect behavior when traversing to an unknown key. (174513305)Blob.slice() to correctly clamp fractional start and end parameters using round-half-to-even rounding per the File API specification, which may change how edge-case fractional values like 0.5 are rounded. (174555334)postMessage() to validate transferable object states after serialization, aligning with the HTML specification. (174558047)structuredClone() and window.postMessage() to correctly throw a DataCloneError when serializing a SharedArrayBuffer outside of cross-origin isolated contexts. (174562553)Element.blur() on an <iframe> did not reset document.activeElement to <body>. (174591529)document.styleSheets to be accessible on documents created by DOMParser. (174625774)innerText getter to correctly handle trailing newlines and blank lines for <p> elements and headings. (174642704)innerText whitespace handling at inline-block boundaries. (174713114)XMLSerializer namespace handling to correctly serialize elements with namespace prefixes. (174726401)innerText getter to preserve newlines for elements with white-space: pre-line. (174727341)innerText handling of replaced elements at block boundaries. (174816319)EventSource to be closed when window.stop() is called. (174830925)preventDefault() during a pointerdown event to correctly suppress mousedown and mouseup events on iOS. (174864309)to not fall back totextContentfor elements withdisplay: contents`. (174883499)innerText to preserve the contents of <option> elements inside <select>. (175006854)Element.innerText to collect option text when called directly on a <select> element. (175156630)Event object’s target property could lose its JavaScript wrapper due to premature garbage collection. (175439759)TreeWalker.currentNode could be prematurely garbage collected. (175442228)FileSystemDirectoryHandle.resolve() to return the correct path array for child entries. (175645387)PerformanceNavigationTiming.domInteractive and domContentLoadedEventEnd incorrectly returning 0 instead of the correct timestamps. (175739835)FileSystemDirectoryHandle.removeEntry() to correctly remove entries. (175745157)CryptoKey to correctly remain associated with its secure context. (176157712)SharedArrayBuffer cloning and agent cluster ID assignment. (176465817)Safari 27 beta adds srgb-linear and display-p3-linear to predefined color spaces, making these linear-light color spaces available in Canvas, WebGL, and other APIs.
Subpixel inline layout is now available in Safari 27 beta. Text and inline elements can now be positioned with device-pixel precision, improving layout accuracy in block direction.
You don’t need to do anything to benefit. Layout engines have been moving in this direction for years; Safari 27 brings inline layout up to that bar.
rowspan values exceeding the actual number of rows were incorrectly computing heights. (3209126)::first-letter styles caused Range.getClientRects() and Range.getBoundingClientRect() to return incorrect dimensions. (71546397)<td> element has an explicit height set. (78549188)margin-start could overlap an adjacent float. (93187697)position: relative on table rows (<tr>) to correctly establish a containing block for absolutely positioned descendants. (94294819)<marquee> elements causing incorrect table width calculations. (99826593)height: 100% in auto-height containers incorrectly resolved to zero height. (161699543)padding-left plus margin-left equals zero. (162376969)visibility: collapse on columns. (168556786)text-overflow: ellipsis and an inline-block pseudo-element. (168875614)min-width: fit-content rendered at an incorrect width. (169359566)height: 100% was incorrectly calculated for replaced elements like images serving as grid items nested inside a flexbox. (169431440)user-select: none. (170477571)inline-block elements so that when overflow is not visible, the baseline is correctly set to the bottom margin edge. (170575015)min-height and min-width constraints in certain configurations. (170765025)max-width on table cells when distributing width between them. (171459245)border-spacing incorrectly included collapsed columns in auto table layout calculations. (171468102)@prefers-color-scheme, it does not follow the color-scheme set by grandparents of the iframe. (172229372)about:blank iframes did not always have a transparent background. (172400258)<br> elements with line-height: 0 still created extra vertical space, failing to respect the declared line height. (174400946)image-orientation being ignored for background-image, border-image, and list-style-image. (174894122)white-space: pre-wrap layout issue with justified text. (174937310)flex-wrap and flex factor computation for wrapping flex items. (175012395)writing-mode content incorrectly wrapping when the parent has auto height. (175123356)filter: blur() ignored border-radius overflow clipping from its parent. (175519148)max-height was removed. (175799547)display: flex. (175866046)min-height and shrinking below their content height. (175883577)max-height constraints. (175932457)scrollbar-gutter placement on the root element in RTL layouts. (175939512)aspect-ratio and content-box padding computed the wrong height in a column flex container. (176033726)align-content: center. (176173122)Safari 27 beta adds support for the targetLatency attribute in WebRTC, for specifying a target latency on a receiver. It adds support for the RTCRtpCodec dictionary and related constructs, improving the ability to inspect and configure codecs. It adds support for RTCRtpReceiver.jitterBufferTarget, for tuning the jitter buffer. And it adds video source width and height to RTC stats.
VideoFrame was encoded in an incorrect color space when encoding to VP9. (169425608)RTCPeerConnection.addIceCandidate() did not reject when the connection was already closed. (170470988)RTCDataChannel did not check the SCTP buffered amount synchronously. (172386678)MediaStreamTrack could have incorrect settings if the source settings changed while the track was being transferred. (172657570)RTCRtpSender.setParameters did not clear parameters that were unset by the web application. (173678165)RTCPeerConnection with iceTransportPolicy: "relay" failed to gather ICE candidates. (174794660)RTCInboundRtpStreamStats.trackIdentifier to match MediaStreamTrack.id. (174938984)The runtime.getDocumentId() Web Extension API now has support in Safari 27 beta. It adds reporting of uncaught JavaScript exceptions and unhandled promise rejections in Web Extension scripts, making extensions easier to debug. And it adds support for propagating user gestures through sendMessage(), connect(), postMessage(), and executeScript() — so extensions can reliably perform actions like media playback that require user activation.
browser.i18n.getMessage() to correctly substitute named placeholders when they appear adjacent to non-space characters. (169146196)browser.i18n.getMessage() to correctly substitute two adjacent named placeholders. (175315700)Safari 27 beta adds support for Secure cookies on loopback hosts. For loopback hosts using plaintext HTTP, cookies marked Secure can now be set via JavaScript and Set-Cookie headers, matching the behavior of other browsers. This simplifies local development and testing with Secure cookies.
data: URLs to be blocked for subresources such as images and scripts, aligning with the Fetch specification. (74165956)XMLHttpRequest incorrectly dropping the request body during redirects. (98459882)X-Frame-Options to only strip tab or space characters, not vertical tabs. (126915315)iso-8859-2, windows-1250, and gbk. (169566553)WKHTTPCookieStore. (174557252)Safari 27 beta now supports specifying maxAge when setting a cookie via the Cookie Store API.
await cookieStore.set({
name: "session",
value: "abc123",
maxAge: 60 * 60 * 24 * 7, // one week, in seconds
});
onupgradeneeded event. (176195526)Safari 27 beta now supports menu items that convert editable text between Simplified and Traditional Chinese characters, now available in the “Transformations” submenu of the context menu for relevant text selections.
::first-letter were not selectable. (5688237)<font size="2"> (10pt) when using rich text editing. (15292320)execCommand('FormatBlock') did not preserve inline styles of replaced block elements, causing text formatting to be lost when pasting content. (157657531)text-indent flickered or was ignored on contenteditable elements while typing. (170280101)user-select: none. (170475401)contentEditable element to a non-editable target. (171221909)Safari 27 beta adds support for the lang and xml:lang attribute in SVG. You can now specify the language of text content in SVG, enabling correct language-aware text rendering and accessibility announcements.
offsetX and offsetY for SVG elements to use the outermost SVG as the base for coordinate calculation. (168548585)href or xlink:href on SVG <image> elements had no visual effect. (96316808)attributeName was dynamically changed. (97097883):visited link color to properly propagate to SVG through currentColor. (98776770)url(#id) was not invalidated when the filter content changed. (101870430)SVGTransformList to properly allow attribute removal. (117840533)<img> tag did not animate correctly due to repaint artifacts with object-fit. (141815698)<tspan> positioning bug with xml:space="preserve" that caused multi-line text to render incorrectly. (143722975)fx and fy attributes on SVGRadialGradientElement to 50% to align with the SVG2 specification. (169645572)SVGAnimatedRect.baseVal to ignore invalid values set on the viewBox attribute, such as negative width or height, aligning with Firefox and Chrome. (170214971)getScreenCTM() did not include CSS transforms and zoom contributions in the legacy SVG rendering path. (171525696)<svg> root element. (172909441)parseClockValue did not reject out-of-range minutes and seconds values per the SMIL timing specification. (173577212)values attribute to preserve empty values and handle trailing semicolons. (173594455)repeat(n) event conditions not triggering animations. (173599629)getStartPositionOfChar and getEndPositionOfChar to be more compliant with the specification. (174145885)glyph-orientation-vertical: auto to use UTR#50 Vertical Orientation properties for correct character orientation in vertical text. (175064567)preserveAspectRatio is set to none. (175173375)background-size. (175345107)stroke-dasharray interpolation to use least common multiple for list length matching and corrected composition behavior. (175598175)@prefers-color-scheme in an SVG image will sometimes not follow the system color preference. (176413340)Safari 27 brings a significant expansion of WKWebView public API for native app developers. The additions make it easier to build advanced browser and web-hosting experiences on top of WebKit:
WKSerializedNode — clone DOM nodes, including shadow roots, between different WKWebView instances.WKJSHandle — use JavaScript object references from native code.WKContentWorldConfiguration — configure content world properties such as autofill scripting, shadow root access, and inspectability when creating a WKContentWorld.alternateRequest and overrideReferrerForAllRequests on WKWebpagePreferences — modify the main resource request during navigation and apply custom referrer headers across all resource loads.willSubmitForm callback on WKNavigationDelegate — receive notification of HTML form submissions via a new WKFormInfo object.mainFrameNavigation on WKNavigationAction and mainFrameNavigation on WKNavigationResponse — correlate navigation actions and responses with each other and their originating loads.WKWebView.load(url:) — load a URL directly without wrapping it in an NSURLRequest.WKHTTPCookieStore.cookies(for:) — retrieve cookies matching a specific URL without fetching the entire cookie store.Several Web Inspector updates in Safari 27 beta make common debugging tasks easier.
The Color Picker now shows color contrast information inline as you edit — no more switching tools mid-decision to check whether a color combination is accessible. This works when you’re editing both foreground and background colors at the same time.
The Color Picker’s format and gamut controls are also now visible upfront instead of hidden. If you’ve ever gone hunting for those options, this will help.
In the Network tab, when a resource redirects, you can now see every request in the chain rather than just the final destination. It’s much easier to figure out what’s actually happening.
The Elements tab adds Subgrid and Grid-Lanes badges that make it easy to identify subgrid and grid-lanes layout contexts as you explore a page.
The Timeline tab now includes the layout root element in Layout event details, so you can see which element triggered a layout pass.
style attribute values in the Elements panel resulting in truncated or malformed content. (149523483)WebAssembly.instantiateStreaming, preventing source-level debugging in LLDB. (174362152)console.groupCollapsed() is used. (175279759)speechSynthesis.cancel() removed utterances queued by subsequent speechSynthesis.speak() calls. (46151521)<use> elements referencing <symbol> elements inside an <img> were incorrectly included as unnamed images in VoiceOver’s Images rotor. (98999595)id attribute of an element targeted by aria-owns did not update the accessibility tree. (107644248)aria-labelledby to correctly use their assigned slotted content for accessible names and ignore hidden slotted nodes. (114500560)<meter> element to have consistent labels between aria-label and title attributes. (127460695)display: contents and content in a shadow root to have their content properly read when referenced by aria-labelledby. (129361833)aria-labelledby to use the checkbox name instead of its value when the checkbox name comes from an associated <label> element. (141564913)drawFocusIfNeeded() canvas API. (146323788)role="presentation". (159304061)<details> elements was not exposed in the accessibility tree. (159865815)contextmenu event was not fired for elements inside iframes when triggered by keyboard or assistive technology actions such as VoiceOver’s VO+Shift+M. (164128676)<input type="button"> elements inside live regions were not announced by assistive technologies. (168200460)::first-letter text not being exposed in the accessibility tree when no other text accompanies it. (168458291)aria-owned rows and their cells in grids and tables. (168770938)<svg> named by a child <title> element did not expose an accessible name. (172559238)aria-activedescendant, preventing assistive technologies from interacting with list items. (172931277)aria-owns was not respected when computing the accessible name from element content. (173249317)<datalist> suggestions appearing with with white text on a white background in dark mode after typing. (168676757)<input> element associated with a <datalist> was intercepted by type-to-select behavior. (173346270)<input type="checkbox" switch> control behave more like other controls with regards to native appearance CSS properties. (173487610)min or max attributes incorrectly matched the :in-range pseudo-class. (174829899)<input> and <textarea> elements did not preserve their user-modified state. (174892989)field-sizing: content clipping the placeholder on number inputs that have no value. (175883299)NSPrintOperation dropped all text. (174756900)Safari 27 beta is available on Golden Gate (macOS 27), iOS 27, iPadOS27 and visionOS 27.
To try Safari 27 beta, install the developer beta on your Apple device. You can also install Safari Technology Preview for macOS 27 beta and macOS 26.
We love hearing from you. To share your thoughts, find our web evangelists online: Jen Simmons on Bluesky / Mastodon, Saron Yitbarek on BlueSky, and Jon Davis on Bluesky / Mastodon. You can follow WebKit on LinkedIn. If you run into any issues, we welcome your feedback on Safari UI (learn more about filing Feedback), or your WebKit bug report about web technologies or Web Inspector. If you run into a website that isn’t working as expected, please file a report at webcompat.com. Filing issues really does make a difference.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。