Safari 18.2 中的 WebKit 功能

2024 年 12 月 9 日

作者：Jen Simmons, Ada Rose Canon, David Degazio, Yoel Hawa, Etienne Segonzac, 和 John Wilander

今天标志着 Safari 18.2 的到来。WebKit 在其中新增了 61 项功能并解决了 111 个问题。亮点包括跨文档视图过渡、使用背景填充边框的能力、visionOS 中的空间视频、Ruby 改进、iOS、iPadOS 和 visionOS 上的 input type=week、WASM 垃圾回收、默认 HTTPS、Genmoji 等。

Safari 18.2 适用于 iOS 18.2、iPadOS 18.2、visionOS 2.2、macOS Sequoia 15.2、macOS Sonoma 和 macOS Ventura。

CSS

文本框

如果你编写 CSS，你可能在某个时候遇到过将文本在框中垂直光学居中，或使标题与图像顶部对齐的困难。现在你可以声明你希望浏览器在计算布局时将哪个字体度量作为文本框的边缘

h2 {
  text-box: trim-start cap;
}

这意味着“请在首行基线处（标题上方）修剪起始边缘”。你可以在右侧看到效果，其中“H”的顶部与图像的顶部对齐

Side by side comparison of with and without "text-box: trim-start cap". With it, the top of the capital H in the headline "Holiday Decorations" lines up perfectly with the top of the photo it's next to.
通过在 Safari 18.2 中探索此演示了解更多信息。

该功能最初名为“leading trim”，现在简称为 text-box。它是两个长手属性—— text-box-trim 和 text-box-edge 的简写，如果你需要控制它们的级联方式，可以单独声明。Safari 18.2 是第一个支持 Text Box 的浏览器，但你今天就可以使用它来渐进式增强你的设计，而没有支持的浏览器则会回退到旧行为。

视图过渡

适用于 Safari 18.2 的 WebKit 新增了对跨文档视图过渡的支持，并支持@view-transition。这提供了一种在网页之间轻松实现动画的机制。如果你正在创建一种应用程序体验，不希望用户在页面之间切换时遇到重新加载，这会特别方便。通过视图过渡，你可以实现交叉淡入淡出、滑动、保持不变只改变新内容等效果。

在 Safari 18.0 中发布的视图过渡原始支持的基础上，适用于 Safari 18.2 的 WebKit 新增了对 view-transition-name: auto 的支持。这意味着如果你在单个页面上应用过渡效果，将无需单独命名数百个不同的内容项。我们在创建此瀑布流布局演示时遇到了这个问题（使用下拉菜单切换到“Combined with View Transitions”布局）。页面上有 80 个项目，我们不得不重复编写 80 行类似 .card:nth-child(80) { view-transition-name: card-80; } 的代码。在实际应用中，你不能依赖永远不会有第 81 个项目，而超出预期的项目则会破坏过渡效果。现在，我们可以直接声明 .card { view-transition-name: auto }，让浏览器自行处理细节。

适用于 Safari 18.2 的 WebKit 还新增了对视图过渡类（View Transition Classes）和视图过渡类型（View Transition Types）的支持。类允许你轻松地在不同的视图过渡之间共享样式。它可以很好地与 view-transition-name: auto 结合使用。类型允许你为相同的视图过渡定义不同的变体（例如，轮播图中从右侧滑入与从左侧滑入）。

此外，Safari 18.2 还新增了对视图过渡的 pageswap 和 pagereveal 事件的支持。

边框背景

适用于 Safari 18.2 的 WebKit 新增了对 background-clip: border-area 的支持。它允许你为一个盒子添加背景，并将该背景裁剪为仅在边框存在的区域显示。它与 background-clip: text 很好地结合，可以创建有趣的视觉效果。

The word "woodworking" large on the page, inside a box with a very thick border. Both the text and border are made out of a photo of a wooden board, showing its wood grain.

在此示例中，我们可以将一张木桌的照片作为背景应用到盒子中两次。然后分别将每个背景裁剪到边框区域和文本区域。

header {
  border-width: 30px solid transparent;
  background-image: url("wooden-table.jpg"),
                    url("wooden-table.jpg");
  background-size: cover;
  background-origin: border-box;
  background-clip: border-area,
                   text;
}

要了解更多工作原理，请阅读使用 background-clip: border-area 创建创意边框。

单位除法及其他复杂计算

适用于 Safari 18.2 的 WebKit 将 calc() 函数更新到最新的 Web 标准，开启了许多新的可能性——包括带有单位的数字除法。例如，你可以使用 calc(100vw / 1px) 将当前视口宽度转换为像素。Scott Kellum 创建了一个演示，其中页面背景颜色由此确定为视口宽度

html {
  background: hsl(calc(100vw / 1px * 0.2deg), 100%, 80%);
}

侧线

适用于 Safari 18.2 的 WebKit 新增了对 text-underline-position: left 和 text-underline-position: right 的支持。这允许你将侧线的位置移动到另一侧。

:root {
  writing-mode: vertical-rl;
}
[lang]:lang(ja) { 
  text-underline-position: right; 
} 
[lang]:not(:lang(ja)) { 
  text-underline-position: under; 
}
Japanese text typeset vertically, with a sideline on the right of the Japanese text, and a sideline on the left of English text, to underline it
通过探索此演示了解更多信息。

现在 Safari 18.2 支持 text-underline-position: right，中文、日文和韩文（CJK）语言的下划线位置和文本强调标记的用户代理默认值已更改。

Ruby

适用于 Safari 18.2 的 WebKit 新增了对三个 Ruby 属性的支持：ruby-align、ruby-overhang 和现在已取消前缀的 ruby-position。

ruby-align 属性类似于 Flexbox、Grid 以及（截至 2024 年 3 月）块级布局的对齐属性。它提供了一种机制，用于调整 Ruby 注释的显示位置——无论它们是在开头分组，还是居中，或者以等量空间分散，或者注释之间和周围都有等量空间。

four diagrams showing the resulting layouts for ruby align
通过实验此演示了解更多信息。

ruby-overhang属性允许你控制 Ruby 注释是否可以溢出到相邻字符上方的空间。

two diagrams showing the resulting layouts for ruby overhang
通过探索此演示了解更多信息。

差异可能很微妙，但在演示的第二个版本中，使用 ruby-overhang: none，两个字符更清晰地分开，以便读者可以看到每个字符都有单独的注释。这确实会导致字符之间出现尴尬的内联间距，打断主文本行的节奏——但例如，对于教科书的初级读者来说，这样做很有帮助。

最后，Safari 18.2 取消了 ruby-position 属性的前缀。自 Safari 7 以来，该属性一直以带有非标准值的 -webkit-ruby-position 形式支持，现在 WebKit 支持标准化值 over、under 和 inter-character。

four diagrams showing the resulting layouts for ruby position
通过探索此演示了解更多信息。

滚动条

适用于 Safari 18.2 的 WebKit 新增了对 scrollbar-width 和 scrollbar-gutter 的支持。如果你在 13-30 年前使用过电脑，你就会记得滚动条过去是多么不同。它们总是存在。它们有厚厚的边槽和复杂的边缘。它们还包括用于鼠标点击的小型上下箭头。十五年前，WebKit 引入了一种方式，通过 ::-webkit-scrollbar 伪元素来样式化这些类型的滚动条。

如今，滚动条在视觉上要简单得多，不使用时通常会完全消失。为了响应这些变化并在多次讨论后，CSS 工作组决定标准化一套精简的滚动条样式工具。

scrollbar-width属性提供了三个选项。默认值为 auto。thin 值要求更细的滚动条。而 none 可以用来完全移除滚动条，同时仍然保持容器可滚动。在 macOS 上，scrollbar-width: thin 会创建更细的滚动条。在 iOS、iPadOS 和 visionOS 上没有变化——iOS 和 iPadOS 总是使用细滚动条。

scrollbar-gutter属性提供了为滚动条预留空间的机会——滚动条将在其中滑动的空间。然而，当浏览器使用“覆盖式滚动条”时，scrollbar-gutter 不会产生任何效果。覆盖式滚动条现在非常常见。它们在页面内容上方滑动，没有可见的边槽。macOS、iOS、iPadOS 和 visionOS 都系统范围地使用覆盖式滚动条。在 macOS 上，用户如果需要，可以通过前往“系统设置”>“外观”，并将“显示滚动条”更改为“始终”来更改此行为。只有那时，以及在其他一些操作系统上，滚动条才会占用页面布局中的空间。

scrollbar-gutter 属性有三个选项：auto、stable 和 stable both-edges。初始值是 auto，在这种情况下，只有当滚动条可见时才预留空间——也就是说，当盒子设置为 overflow: scroll，或具有 overflow: auto 且内容足以溢出时。scrollbar: stable 规则允许你作为 Web 开发人员要求边槽始终预留空间，这有助于创建布局一致性。第三个选项 scrollbar-gutter: stable both-edges 则要求浏览器不仅为滚动条创建始终预留的稳定空间，还要在盒子的两边创建相同量的空间。你可以在下面看到结果。

在 macOS 上的 Safari 18.2 中，当“显示滚动条”设置为“始终”时，无论内容是否足以导致滚动条出现，网站滚动条都会显示。通过在 macOS 上尝试使用覆盖式滚动条或在其他操作系统上尝试此演示了解更多信息。

滚动到文本片段

你可能熟悉 HTML 中的锚点链接，你可以向某人发送指向页面上特定锚点的链接——前提是该网站的 Web 开发人员为你创建了锚点链接。滚动到文本片段是一种工具，允许用户创建指向页面上任何文本片段的链接，无论网站开发人员是否考虑到这样做。滚动到文本片段的支持已在 Safari 16.1 中添加。现在在 Safari 18.2 中，创建文本片段链接有了简单的 UI。

工作原理如下：首先，访问一个网页并高亮显示你想要通过链接指向的文本。然后从上下文菜单中选择“复制带高亮的链接”。

a website in Safari on iPad, with a string of text highlighted, and a menu popped open where the user can choose Copy Link with Highlight

URL 如下所示：https://webkit.ac.cn/blog/16214/background-clip-border-area/#:~:text=background%2Dclip:%20text。当用户导航到该 URL 时，浏览器会将文本片段滚动到视图中，并用持久高亮标记它。

适用于 Safari 18.2 的 WebKit 还新增了对 ::target-text 伪元素的支持。它为网站的网页设计师/开发人员提供了一种机制，用于为其网站的文本片段链接结果设置样式。

a website on a phone, with a headline of text highlighted in yellow
当用户输入“滚动到文本片段”URL 时出现的突出显示现在可以使用 ::target-text 伪元素进行样式设置。

更多 CSS

适用于 Safari 18.2 的 WebKit 在 CSS 选择器中新增了对 :is(:host) 的支持。此前，:is() 和:host() 均受支持，但不支持这种特定组合。

适用于 Safari 18.2 的 WebKit 新增了对在圆形和椭圆形形状中使用角点关键字 closest-corner 和 farthest-corner 的支持。你可能在径向渐变语法中见过这些关键字。它允许你使用 clip-path: circle(closest-corner at 50px 50px) 这样的语法来裁剪元素。

适用于 Safari 18.2 的 WebKit 新增了对 @property 的 syntax 描述符的 <string> 值的支持。

@property --foobar {
   syntax: "<string>";
}

Safari 18.2 新增了对 @page 边距描述符的支持。它还为 @page 添加了对日本标准纸张尺寸 jis-b4 和 jis-b5 的支持。此外，@page 的 size 属性现在解析为描述符而不是全局属性。

空间视频和照片

visionOS 2.2 中的 Safari 18.2 现在支持观看空间视频。你可以在 Vision Pro、iPhone 15 Pro 或任何 iPhone 16，或任何能够录制带有空间元数据的 MV-HEVC 的相机上录制空间视频。然后，你可以像发布任何其他视频一样，使用 HTML video 元素将其发布到网络上。

<video controls>
  <source src="birthdayparty.mov" type="video/quicktime; codecs=hvc1.1.6.L123.B0" /> <!-- spatial video -->
  <source src="birthdayparty.webm" type="video/webm" />
</video>

任何支持 HEVC 视频的浏览器都将在网页上将空间视频文件作为 2D 视频播放。在 visionOS 中，Safari 18.2 在其他视频控件旁边提供了 UI，允许用户点击以空间方式观看视频。第一次点击时，视频会以浮动帧的形式出现，Safari 窗口消失。然后当用户再次点击时，视频会进一步扩展，创造更沉浸式的体验。当他们退出视频时，Safari 窗口会返回。

visionOS 2.2 中的 Safari 18.2 还新增了对观看空间照片的支持。

每当你将空间照片嵌入网页时，它都会以 2D 形式内联显示，就像其他任何照片一样。从 visionOS 版 Safari 18.0 开始，作为一名网页开发者，你可以使用 JavaScript 全屏 API 提供一种机制，让空间照片脱离网页并实现沉浸式体验。

现在，在 Safari 18.2 中，用户可以通过捏合并按住任何空间照片，然后选择“查看空间照片”来观看。

a webpage floating in visionOS, with an image on the page, and a menu popped open next to it with View Spatial Photos as an option

如果你想制作自己的 UI，可以继续在空间照片上使用全屏 API。现在它也适用于空间视频。它们在一个立体门户中显示，带有一个按钮，允许用户完全沉浸在内容中。

WebXR

适用于 visionOS 2.2 的 Safari 18.2 中的 WebKit 新增了对重新投影 WebXR 内容的支持，将深度从正 Z 转换为反 Z。现在，WebXR 会话包含 enabledFeatures 属性。当你请求 XRSession 时，你会列出你的 WebXR 体验的 optionalFeatures 和 requiredFeatures。enabledFeatures 属性告诉你哪些功能已被授予，而无需进行功能检测。

Genmoji

The interface for creating a Genmoji, showing three options for "world wide web" — a globe covered in network connection dots, a globe encircled by wires, and a globe with a giant smile plastered across it's face.

iOS 18.2 和 iPadOS 18.2 上的 WebKit 新增了对 Genmoji 的支持。你可以直接在键盘中制作全新的 Genmoji。提供描述以查看预览，并调整描述直到你获得完美的自定义表情符号。

在 Safari 18.2 中，你可以将创建的 Genmoji 发布到网络上。它们会作为图像添加到内容中。

WKWebView 通过 WKWebViewConfiguration 上的 supportsAdaptiveImageGlyph 属性支持完整的 NSAdaptiveImageGlyph API，从而可以在你的应用中支持自适应图像字形。通过观看 WWDC24 上的使用 Genmoji 为你的应用带来表现力了解更多信息。

媒体

适用于 Safari 18.2 的 WebKit 新增了对允许网站覆盖系统默认辅助功能字幕样式的支持。Web 视频文本轨道（WebVTT）是网络上用于创建字幕和隐藏式字幕的系统。作为开发人员，你可以使用::cue伪元素对这些文本轨道进行样式设置。在 Apple 平台上的系统辅助功能设置中，用户可以选择系统默认的字幕样式，或者创建自己的自定义样式。以前，系统默认的字幕样式会覆盖网站的样式。现在，系统默认的字幕样式总是可以被覆盖的，但用户仍然可以创建自定义样式，并防止这些样式被页面覆盖。

当网站未在 MediaSession 元数据中指定图像时，适用于 Safari 18.2 的 WebKit 现在会将一个备用图像添加到“正在播放”中。

HTML

iPhone with a calendar showing on a webpage, with UI for selecting a week at a time

Safari 18.2 新增了对 iOS、iPadOS 和 visionOS 上 input type=week 的支持。

适用于 Safari 18.2 的 WebKit 新增了对 <script> 和 <style> 元素的 blocking=render 属性的支持。它允许你告知浏览器，在特定脚本或样式文件运行之前，阻止渲染页面的呈现。这是许多网页资源的默认行为，因此不常需要。但如果你发现自己处于需要这种工具（例如带有 async 属性的 <script>）的情况，它就会派上用场。适用于 Safari 18.2 的 WebKit 还新增了对使用 <link rel=expect> 进行文档渲染阻塞的支持。它同样会导致页面被渲染阻塞，直到文档的关键部分被解析，以便一致地渲染。这两个工具对于跨文档视图过渡特别有用，在视图过渡中你可能希望对动画快照拍摄前必须加载的内容有更多控制。

WebAssembly

适用于 Safari 18.2 的 WebKit 新增了对 WASM 垃圾回收的支持。它允许 WebAssembly 模块定义各种新的引用类型，其内存由浏览器自动管理。这些类型包括简单的结构体和数组等数据类型，以及更复杂的类型关系，如子类型和递归。如果没有 WASM GC，依赖垃圾回收的源语言（如 Java、C#、Kotlin、Go 等）通常必须编写自己的垃圾回收器并将其编译为 WebAssembly。这在面向 WebAssembly 时构成了显著障碍。由于 WebAssembly 内存的限制，这些回收器通常被迫使用效率较低的实现技术，并且无法轻松与 JavaScript 接口。有了 WASM GC，这些语言通常可以直接在 WebAssembly 中表达它们的类型系统，从而更容易实现目标。一旦在 WebAssembly 中运行，这些语言就可以利用浏览器用于管理 JavaScript 对象的相同原生垃圾回收器，这简化了 JS/WASM 互操作性，并且通常能提高性能。

适用于 Safari 18.2 的 WebKit 还新增了对 WASM 尾调用的支持，它允许 WebAssembly 模块在重用当前堆栈帧的同时调用函数。尾调用可以渐近地减少递归算法的内存使用，从而使函数式编程模式可以直接在 WebAssembly 中表达。尾调用还可以用于高效地表达状态机，这可以提高编译到 WebAssembly 的解释器和模拟器的性能。

Web API

WebKit 在 Safari 18.2 中对指针事件（Pointer Events）进行了重大改进，包括更新 click、contextmenu 和 click() 以使用 PointerEvent，使开发人员能够访问这些事件的 pointerType 属性。此外，还新增了对 auxclick 事件的支持，该事件在非主指向设备被按下并释放时触发。

现在支持新的 PointerEvent 方法 getPredictedEvents() 和 getCoalescedEvents()。getPredictedEvents() 方法返回一系列 PointerEvent 实例，这些实例是根据过去的点、当前速度和轨迹估算的未来指针位置。getCoalescedEvents() 方法返回一系列被合并（合并）到单个 pointermove 中的 PointerEvent 实例。

此外，适用于 Safari 18.2 的 WebKit 现在支持 altitudeAngle 和 azimuthAngle，让你能够轻松确定 Apple Pencil 与屏幕 X-Y 或 Y-Z 平面之间的角度。这些只读属性中的第一个表示指针或手写笔轴与设备屏幕 X-Y 平面之间的角度。第二个表示 Y-Z 平面与包含指针或手写笔轴和 Y 轴的平面之间的角度。

WebKit 中其他的 Web API 增强功能包括对 NavigationActivation.finished 处理的支持，以及规范更新的实现，该更新为 <dialog> 元素提供了一个新的初始焦点算法。

JavaScript

适用于 Safari 18.2 的 WebKit 对 JavaScript 引入了几项增强功能，包括一个新的类型化数组 — Float16Array — 以补充现有的 Float32Array 和 Float64Array。此数组以平台字节顺序表示 16 位浮点数。

本次更新还新增了对 Uint8Array.prototype.toBase64 和 Uint8Array.prototype.toHex 的支持，以及对 Uint8Array.fromBase64 和 Uint8Array.prototype.setFromBase64 的支持。

对 Intl.Locale 对象的增强现在支持 firstDayOfWeek。它返回有关在特定地点哪个日期被视为一周的第一天信息。

还新增了对 Promise.try 静态方法和 RegExp.escape 的支持。

适用于 Safari 18.2 的 WebKit 新增了对 WebAssembly.Module.imports 和 WebAssembly.Module.exports 的类型反射支持。

迭代器改进包括 Iterator.prototype.constructor 和 Iterator.prototype[@@toStringTag]，以及作为迭代器助手提案一部分的 Iterator.from。

安全与隐私

iOS、iPadOS 和 visionOS 上的 Safari 18.2 将始终首先尝试通过安全连接加载网页，即默认使用 HTTPS。只有当安全页面加载失败时，Safari 才会回退到非安全的 HTTP。

此外，在所有平台上，Safari 18.2 还新增了一个可选的安全设置，用于强制执行安全连接并在尝试非安全回退之前显示警告。用户可以选择取消或通过 HTTP 继续。该设置在 iOS、iPadOS 和 VisionOS 上标记为“不安全连接警告”。在 macOS 上，它标记为“在通过不安全连接连接到网站前发出警告”。

网页检查器

适用于 Safari 18.2 的 WebKit 新增了对文件内部代码黑盒化范围的支持，并新增了对源映射进行黑盒化的支持。

适用于 Safari 18.2 的 WebKit 还新增了在控制台中显示箭头函数 boundThis 的支持。

WebDriver

适用于 Safari 18.2 的 WebKit 新增了对使用持久化网站数据存储的支持。

WKWebView

WKWebView 还新增了对 WKDownload.originatingFrame 和 WKDownload.userInitiated API 的支持，以及对 WKWebpagePreferences.UpgradeToHTTPSPolicy 的支持。

错误修复及更多

除了所有新功能外，适用于 Safari 18.2 的 WebKit 还包括完善现有功能的工作。

辅助功能

  • 修复了 text-transform: full-size-kana 不影响语音输出的问题。
  • 修复了元素反射属性无法检索断开连接的元素的问题。
  • 修复了 VoiceOver 焦点在到达 PDF 表单字段时无法激活它们的问题。
  • 修复了当动态忽略元素的子元素发生变化且其未忽略的祖先在同一树更新周期中时，树更新中断的问题。
  • 修复了动态创建和嵌套的 aria-modal 对话框的处理问题。
  • 修复了文本选择清除时辅助功能树未更新的问题。

浏览器

  • 修复了更新 macOS 后窗口无法恢复的问题。

Canvas

  • 修复了 CanvasRenderingContext2D 的 globalAlpha 属性在 globalCompositeOperation 的某些值下被忽略的问题。

CSS

  • 修复了应用于表格行的背景在每个表格单元格中重复出现的问题。
  • 修复了 @page 的 size 属性被解析为描述符而不是全局 CSS 属性的问题。
  • 修复了 background-clip: text 无法正确绘制文本装饰的问题。
  • 修复了 font-variant: small-caps normal; 作为无效语法的问题。
  • 修复了 -webkit-line-clamp: none 无法解析的问题。
  • 修复了 text-underline-offset 不支持百分比的问题。
  • 修复了 text-decoration-thickness 在按钮上不起作用的问题。
  • 修复了 lh 单位有时在 line-height 解析之前计算的问题。
  • 修复了 touch-action 在序列化时使用 pan-x pan-y 顺序的问题。
  • 修复了 place-content、place-items 和 place-self 属性的序列化问题。
  • 更新了 CSS Nesting 以移除提升行为。
  • 修复了 @scope 内的 CSS 嵌套声明行为类似于 :where(:scope) 的问题。
  • 在 CSS 嵌套中禁止匹配 :has()。
  • 改进了滚动条样式支持以提高互操作性。
  • 修复了深色模式下 ButtonFace 和 ButtonText 系统颜色之间的对比度问题。
  • 修复了属性 initial-value 使 @property 规则对 [var(--x)] 无效的问题。
  • 修复了以编程方式修改属性值时属性值失效的问题，以使页面属性选择器按预期工作。

编辑

  • 与 autocorrect 属性的标准化版本保持一致，该版本不支持电子邮件、URL 和密码字段，并且不以特殊方式处理空字符串值。

表单

  • 修复了 HTMLSelectElement.prototype.add 与 optgroup 元素的问题。

历史记录

  • 修复了使用 Cross-Origin-Opener-Policy HTTP 头禁用回退/前进缓存的问题。

JavaScript

  • 修复了类字段初始化器不允许 yield 和 await 表达式的问题。
  • 修复了 DestructuringAssignmentTarget 在调用 [[Get]] 或步进迭代器之前进行评估的问题。
  • 修复了 JIT 编译器中 BigInt 负指数抛出异常的问题。
  • 修复了 RegExp 范围量词允许 2^53 – 1 的问题。
  • 修复了 Uint8Array#setFromBase64 解码和写入在坏数据之前出现的块的问题。
  • 类字段初始化器中禁止使用 yield 和 await 表达式。
  • 修复了 ISO8601 字符串中不带时间的时区被拒绝的问题。
  • 修复了 Object.keys(global) 包含不可枚举属性，除非首先删除它们的问题。
  • 修复了 Temporal.Instant.fromEpochMilliseconds 的错误消息。
  • 修复了持续时间格式的纳秒计算顺序问题。
  • 修复了 TimeZoneAnnotation 不允许低于分钟的问题。
  • Temporal.Instant.prototype.epochMilliseconds 现在返回一个向下取整的值。
  • 改进了当 WeakMap 构造函数接受一个产生无效条目的可迭代对象时的 TypeError 消息。
  • 修复了在解构 let 时出现不正确的 SyntaxError 问题。
  • 移除了已废弃的 Temporal.Instant API。

媒体

  • 修复了全屏错误处理，使其包含错误消息。
  • 修复了 WebM 文件的 audioTrack.configuration() 值问题。

PDF

  • 修复了在 PDF 上使用全选快捷键 ⌘A（Command-A）可能导致所有页面变为空白的卡顿问题。

渲染

  • 修复了 mix-blend-mode 中不可分离的混合模式在合成层元素上不起作用的问题。
  • 修复了 MathML 将无效标记布局为 <mrow> 的问题。
  • 通过新增对折行（wrapped）列弹性容器、多列容器以及依赖行大小的宽高比项目的支持，改进了网格轨道尺寸调整。
  • 修复了重新布局时网格项目使用的边距问题。
  • 修复了网格区域在布局溢出中被考虑的问题。
  • 修复了网格区域溢出包含行内末端和块末端内边距的问题。
  • 修复了跨越多个轨道的项目优化问题。
  • 修复了在 height: auto 的容器中渲染具有百分比高度的图像内容的问题。
  • 修复了当具有混合 white-space 值应用于表格和表格内容的表格出现额外换行的问题。
  • 修复了大小设置为 content-box 的重复 background-image 未能在 iframe 中填充视口的问题。
  • 修复了当页面缩放小于 1 时，范围输入类型刻度标记的渲染问题。

安全

  • 修复了 blob:// 资源的位置权限提示中源为空的问题。
  • 修复了 javascript: URL 导航到由 window.open 创建的另一个浏览上下文时未检查源的内容安全策略的问题。

SVG

  • 修复了 clip-path 未能正确应用于 SVG 元素的问题。
  • 修复了带有 transform-origin 的 SVG 缩放问题。
  • 修复了当 path 为空时 getPointAtLength 抛出异常的问题。
  • 修复了 fill 在动画元素上不被视为表示属性的问题。
  • 修复了 XHTML 文档中的脚本元素在强制执行受信任类型时无法工作的问题。
  • 移除了非标准的 hasExtension。

Web 动画

  • 修复了 alignment-baseline 和 buffered-rendering 不支持离散动画的问题。
  • 修复了 hanging-punctuation 不支持离散动画的问题。
  • 修复了 scroll-snap- 属性不支持离散动画的问题。
  • 修复了 column-span 不支持离散动画的问题。
  • 修复了 appearance 不支持离散动画的问题。
  • 修复了 hyphenate-character 不支持离散动画的问题。
  • 修复了 font-optical-sizing 不支持离散动画的问题。
  • 修复了 image-rendering 不支持离散动画的问题。
  • 改进了对简写动画的支持。
  • 修复了 mask-border- 属性无法动画化的问题。
  • 修复了 stroke-color 无法动画化的问题。
  • 修复了变换动画跳来跳去而不是连续动画的问题。

Web API

  • 修复了启用全屏 API 时指针锁定 API 无法工作的问题。
  • 修复了从平台鼠标事件生成的指针事件使用平台事件时间戳的问题。
  • 将 oncuechange 事件处理程序处理与其他事件处理程序对齐。
  • 修复了鼠标进入网页视图窗口时调度两个 mousemove 事件而不是一个的问题。
  • 修复了为指针捕获创建的指针事件无法被信任和组合的问题。
  • 修复了设置指针捕获时，针对指针的“活动文档”进行检查的问题。
  • 移除了对非标准“overflow”事件的支持。
  • 将 onbeforeinput 移动到 GlobalEventHandlers。
  • 修复了 popovertarget 在表单按钮上不起作用的问题。
  • 修复了弹出层标签导航问题。
  • 修复了非 HTML 元素的书写方向问题。
  • 修复了影子树的书写方向问题。
  • 修复了设置 .value = 无法更新 dir=auto 输入的问题。
  • 修复了 XMLSerializer.serializeToString() 不序列化 <img> 的子元素，以及如果 <img> 有子元素也不关闭 <img> 的问题。
  • 修复了选择以常用短语结尾的大段文本时文本高亮显示的问题。
  • 修复了复制文章中常见术语的链接导致页面部分被错误高亮的问题。
  • 修复了 SVG 元素的 scrollIntoView(... 问题。
  • 修复了非模态弹出对话框阻碍其背后内容交互的问题。
  • 修复了 pushManager.subscribe 返回空端点的问题。

Web 应用

  • 修复了 Web 应用程序清单解析时未修剪所有 ASCII 空白字符的问题。

WebDriver

  • 修复了 WebDriver 使用指针原点而不是视口原点来解析状态位置的问题。
  • 通过确保输入分发逻辑正确解释带有不同 button 值的连续鼠标按下或鼠标释放操作，修复了弦式鼠标交互问题。
  • 修复了 WebDriver 有时截屏时顶部有透明灰色线条且没有圆角的问题。
  • 修复了所有脚本评估在用户激活时无条件执行的问题。

网页检查器

  • 修复了编辑标签名称时添加的属性解析问题。
  • 修复了控制台提示中多行内容不可滚动的问题。

WebXR

  • 修复了 visionOS 沉浸式会话期间音频不可听的问题。

WKWebView

  • 修复了应用程序启动时间歇性崩溃的问题。
  • 修复了当部署目标低于 iOS 18 时 -[WKWebViewConfiguration writingToolsBehavior] 不可用的问题。(FB15297419)
  • 修复了在没有会话开始的情况下调用 [NSInputAnalytics didInsertText:] 后文本编辑损坏的问题。

更新到 Safari 18.2

Safari 18.2 适用于 iOS 18.2、iPadOS 18.2、macOS Sequoia、macOS Sonoma、macOS Ventura 以及 visionOS 2.2。

如果你正在运行 macOS Sonoma 或 macOS Ventura，你可以单独更新 Safari，而无需更新 macOS。前往  > 系统设置 > 通用 > 软件更新，然后点击“可用更新”下的“更多信息…”。

要在 iPhone、iPad 或 Apple Vision Pro 上获取最新版本的 Safari，请前往“设置”>“通用”>“软件更新”，然后轻点以更新。

反馈

我们乐于听取你的意见。要分享你的想法，请在 Bluesky / Mastodon 上找到 Jen Simmons，并在 Bluesky / Mastodon 上找到 Jon Davis。你可以在 LinkedIn 或 X 上关注 WebKit。如果你遇到任何问题，我们欢迎你就 Safari UI 提供反馈（了解有关提交反馈的更多信息），或就网页技术或网页检查器提交 WebKit 错误报告。如果你遇到无法正常工作的网站，请在 webcompat.com 提交报告。提交问题确实会带来改变。

在 macOS 上下载最新的 Safari 技术预览版，以保持在网页平台的前沿并使用最新的网页检查器功能。

你还可以在Safari 18.2 发布说明中找到此信息。