ios safari svg not working

Safari 17 doesn't show svg icons in dark mode

After migrating from iOS 16 to 17, Safari does not show svg icons. On devices with iOS 16 they are displayed

Is it on your website? Do you have the source code available? Please add more details.

Is a react WebApp. Svg was define as

import React from "react";

export default function ArrowLeft() { return ( <svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" data-testid="arrow-left"> <path d="M4.50001 11.625H19.5V12.375H4.50001V11.625Z" /> <path d="M10.6465 5.14645L11.3536 5.85355L5.20712 12L11.3536 18.1464L10.6465 18.8536L3.79291 12L10.6465 5.14645Z" /> </svg> ); }

Example of Icon

It can reproduce in light mode too. If it is the first time for a browser tab to render the SVG，the SVG DOM will disappear but the layer remains，such like give the dom the style visibility: hidden .

6 Common SVG Fails (and How to Fix Them)

Someone recently asked me how I approach debugging inline SVGs. Because it is part of the DOM, we can inspect any inline SVG in any browser DevTools. And because of that, we have the ability to scope things out and uncover any potential issues or opportunities to optimize the SVG.

But sometimes, we can’t even see our SVGs at all. In those cases, there are six specific things that I look for when I’m debugging.

1. The viewBox values

The viewBox is a common point of confusion when working with SVG. It’s technically fine to use inline SVG without it, but we would lose one of its most significant benefits: scaling with the container. At the same time, it can work against us when improperly configured, resulting in unwanted clipping.

The elements are there when they’re clipped — they’re just in a part of the coordinate system that we don’t see. If we were to open the file in some graphics editing program, it might look like this:

Cat line art with part of the drawing outside the artwork area in Illustrator.

The easiest way to fix this? Add overflow="visible" to the SVG, whether it’s in our stylesheet, inline on the style attribute or directly as an SVG presentation attribute. But if we also apply a background-color to the SVG or if we have other elements around it, things might look a little bit off. In this case, the best option will be to edit the viewBox to show that part of the coordinate system that was hidden:

There are a few additional things about the viewBox that are worth covering while we’re on the topic:

How does the viewBox work?

SVG is an infinite canvas, but we can control what we see and how we see it through the viewport and the viewBox .

The viewport is a window frame on the infinite canvas. Its dimensions are defined by width and height attributes, or in CSS with the corresponding width and height properties. We can specify any length unit we want, but if we provide unitless numbers, they default to pixels.

The viewBox is defined by four values. The first two are the starting point at the upper-left corner ( x and y values, negative numbers allowed). I’m editing these to reframe the image. The last two are the width and height of the coordinate system inside the viewport — this is where we can edit the scale of the grid (which we’ll get into in the section on Zooming ).

Here’s simplified markup showing the SVG viewBox and the width and height attributes both set on the <svg> :

…maps to this:

The viewport we see starts where 0 on the x-axis and 0 on the y-axis meet.

By changing this:

…to this:

…the width and height remain the same ( 700 units each), but the start of the coordinate system is now at the 300 point on the x-axis and 200 on the y-axis.

In the following video I’m adding a red <circle> to the SVG with its center at the 300 point on the x-axis and 200 on the y-axis. Notice how changing the viewBox coordinates to the same values also changes the circle’s placement to the upper-left corner of the frame while the rendered size of the SVG remains the same ( 700 × 700 ). All I did was “reframe” things with the viewBox .

We can change the last two values inside the viewBox to zoom in or out of the image. The larger the values, the more SVG units are added to fit in the viewport, resulting in a smaller image. If we want to keep a 1:1 ratio, our viewBox width and height must match our viewport width and height values.

Let’s see what happens in Illustrator when we change these parameters. The artboard is the viewport which is represented by a white 700px square. Everything else outside that area is our infinite SVG canvas and gets clipped by default.

Figure 1 below shows a blue dot at 900 along the x-axis and 900 along the y-axis. If I change the last two viewBox values from 700 to 900 like this:

…then the blue dot is almost fully back in view, as seen in Figure 2 below. Our image is scaled down because we increased the viewBox values, but the SVG’s actual width and height dimensions remained the same, and the blue dot made its way back closer to the unclipped area.

There is a pink square as evidence of how the grid scales to fit the viewport: the unit gets smaller, and more grid lines fit into the same viewport area. You can play with the same values in the following Pen to see that work in action:

2. Missing width and height

Another common thing I look at when debugging inline SVG is whether the markup contains the width or height attributes. This is no big deal in many cases unless the SVG is inside a container with absolute positioning or a flexible container (as Safari computes the SVG width value with 0px instead of auto ). Excluding width or height in these cases prevents us from seeing the full image, as we can see by opening this CodePen demo and comparing it in Chrome, Safari, and Firefox (tap images for larger view).

The solution? Add a width or height, whether as a presentation attribute, inline in the style attribute, or in CSS. Avoid using height by itself, particularly when it is set to 100% or auto . Another workaround is to set the right and left values .

You can play around with the following Pen and combine the different options.

3. Inadvertent fill and stroke colors

It may also be that we are applying color to the <svg> tag, whether it’s an inline style or coming from CSS. That’s fine, but there could be other color values throughout the markup or styles that conflict with the color set on the <svg> , causing parts to be invisible.

That’s why I tend to look for the fill and stroke attributes in the SVG’s markup and wipe them out. The following video shows an SVG I styled in CSS with a red fill . There are a couple of instances where parts of the SVG are filled in white directly in the markup that I removed to reveal the missing pieces.

4. Missing IDs

This one might seem super obvious, but you’d be surprised how often I see it come up. Let’s say we made an SVG file in Illustrator and were very diligent about naming our layers so that you get nice matching IDs in the markup when exporting the file. And let’s say we plan to style that SVG in CSS by hooking into those IDs.

That’s a nice way to do things. But there are plenty of times where I’ve seen the same SVG file exported a second time to the same location and the IDs are different, usually when copy/pasting the vectors directly. Maybe a new layer was added, or one of the existing ones was renamed or something. Whatever the case, the CSS rules no longer match the IDs in the SVG markup, causing the SVG to render differently than you’d expect.

Underscores with numbers after the element IDs

In large SVG files we might find it difficult to find those IDs. This is a good time to open the DevTools, inspect that part of the graphic that’s not working, and see if those IDs are still matching.

So, I’d say it’s worth opening an exported SVG file in a code editor and comparing it to the original before swapping things out. Apps like Illustrator, Figma, and Sketch are smart, but that doesn’t mean we aren’t responsible for vetting them.

5. Checklist for clipping and masking

If an SVG is unexpectedly clipped and the viewBox checks out alright, I usually look at the CSS for clip-path or mask properties that might interfere with the image. It’s tempting to keep looking at the inline markup, but it’s good to remember that an SVG’s styling might be happening elsewhere.

CSS clipping and masking allow us to “hide” parts of an image or element. In SVG, <clipPath> is a vector operation that cuts parts of an image with no halfway results. The <mask> tag is a pixel operation that allows transparency, semi-transparency effects, and blurred edges.

This is a small checklist for debugging cases where clipping and masking are involved:

Make sure the clipping path (or mask) and the graphic overlap one another. The overlapping parts are what gets displayed.
If you have a complex path that is not intersecting your graphic, try applying transforms until they match.
You can still inspect the inner code with the DevTools even though the <clipPath> or <mask> are not rendered, so use it!
Copy the markup inside <clipPath> and <mask> and paste it before closing the </svg> tag. Then add a fill to those shapes and check the SVG’s coordinates and dimensions. If you still do not see the image, try adding overflow="hidden" to the <svg> tag.
Check that a unique ID is used for the <clipPath> or <mask> , and that the same ID is applied to the shapes or group of shapes that are clipped or masked. A mismatched ID will break the appearance.
Check for typos in the markup between the <clipPath> or <mask> tags.
fill , stroke , opacity , or some other styles applied to the elements inside <clipPath> are useless — the only useful part is the fill-region geometry of those elements. That’s why if you use a <polyline> it will behave as a <polygon> and if you use a <line> you won’t see any clipping effect.
If you don’t see your image after applying a <mask> , make sure that the fill of the masking content is not entirely black. The luminance of the masking element determines the opacity of the final graphic. You’ll be able to see through the brighter parts, and the darker parts will hide your image’s content.

You can play with masked and clipped elements in this Pen .

6. Namespaces

Did you know that SVG is an XML-based markup language? Well, it is! The namespace for SVG is set on the xmlns attribute:

There’s a lot to know about namespacing in XML and MDN has a great primer on it. Suffice to say, the namespace provides context to the browser, informing it that the markup is specific to SVG. The idea is that namespaces help prevent conflicts when more than one type of XML is in the same file, like SVG and XHTML. This is a much less common issue in modern browsers but could help explain SVG rendering issues in older browsers or browsers like Gecko that are strict when defining doctypes and namespaces.

The SVG 2 specification does not require namespacing when using HTML syntax. But it’s crucial if support for legacy browsers is a priority — plus, it doesn’t hurt anything to add it. That way, when the <html> element’s xmlns attribute is defined, it will not conflict in those rare cases.

This is also true when using inline SVG in CSS, like setting it as a background image. In the following example, a checkmark icon appears on the input after successful validation. This is what the CSS looks like:

When we remove the namespace inside the SVG in the background property, the image disappears:

Another common namespace prefix is xlink:href . We use it a lot when referencing other parts of the SVG like: patterns, filters, animations or gradients. The recommendation is to start replacing it with href as the other one is being deprecated since SVG 2, but there might be compatibility issues with older browsers. In that case, we can use both. Just remember to include the namespace xmlns:xlink="http://www.w3.org/1999/xlink" if you are still using xlink:href .

Level up your SVG skills!

I hope these tips help save you a ton of time if you find yourself troubleshooting improperly rendered inline SVGs. These are just the things I look for. Maybe you have different red flags you watch for — if so, tell me in the comments!

The bottom line is that it pays to have at least a basic understanding of the various ways SVG can be used . CodePen Challenges often incorporate SVG and offer good practice. Here are a few more resources to level up:

Using SVG with CSS3 and HTML5 (Amelia Bellamy-Royds, Kurt Cagle, Dudley Storey) — I consider it the SVG Bible.
Lea Verou has a wealth of SVG knowledge and has spoken on the topic quite a bit (like this video from Frontend United 2019 ).
SVG Animations (Sarah Drasner)
SVG Essentials (Amelia Bellamy-Royds, J. David Eisenberg)
Practical SVG (Chris Coyier)

There are a few people I suggest following for SVG-related goodness:

Sara Soueidan
Carl Schoof
Cassie Evans

This is all great advice, I’d just like to add something else to consider specifically in the context of SVG on a webpage. It could easily be the case that the problem isn’t with the SVG at all, and is due to CSS positioning, z-index, etc. etc.

Essentially all of the things that can ruin your day using <img> or <div> can also apply to your SVGs. I have spent a non-zero amount of time trying to debug SVGs that were hidden/clipped due to markup/styling on the page itself. Not the best use of time so always worth double checking visibility , display etc. and making sure devtools shows the <svg> is actually displaying where and how you expect.

That’s true! It’s a good point. The only one I’m including is that mention about flexbox and position absolute behavior but is an idea that could be extended in a separate article.

I believe a nice disclaimer with a checklist or article to first check visibility, display, opacity, sizing could help :)

Thanks for the feedback!

It’s always nice to see other people as excited about SVG as I am. There aren’t many of us! I hope you don’t mind if I add a few things to the namespaces chapter.

There’s a simple rule: SVG is XML, requiring a namespace on the root element to be rendered (every browser is consistent with that). Even if it’s inlined in CSS as data:uri. But when it’s inlined in HTML, there’s no need for the namespace (especially for the <html> element), just like you don’t need type=text/javascript for your <script> . Every HTML5-compatible browser parser agrees with that behavior. And every browser has been HTML5 compatible for at least ten years, but probably more.

I don’t think it makes a lot of sense to add namespaces for legacy browsers today. I think among all the parts of the typical modern website, SVG without a namespace would fail the last :)

Hi Vadim! Nice to meet another SVG fan! :D

I totally agree with you, sorry if I didn’t make it that clear in the article, but yes, to be honest, I usually don’t use the SVG namespace in HTML and never had a problem with that. But I did have problems when working with them on CSS (as the example) or with the xlink:href not so long ago.

My point was to make anyone aware of that, just in case they are dealing with something similar.

Thanks for mentioning this!

DEV Community

Posted on Feb 1, 2022 • Originally published at ohhelloana.blog on Feb 1, 2022

TIL: A situation where the <svg> doesn't fully appear in Safari.

I wasn't entirely sure how to title this blog post as it isn't straightforward to describe it but here it goes. I should also preface that my knowledge of SVGs is quite high level so maybe someone who is may more experienced than me would have spotted this out easily but I feel like this warrants a post because it doesn't happen in all browsers and quirks are annoying to solve.

Recently, we had a very intricate SVG that wasn't rendering as expected in Safari. Chrome, Edge and Firefox seemed to be happy with it. This SVG was an illustration and its code was automatically generated by a design platform and it included a raster image.

The following isn't the actual SVG but a high level presentation of the structure of the SVG. I substituted some random values with the word value as they aren't particularly important to the goal or issue.

When opened in Safari, all the path would render as expected except the path that was requesting to be filled with a pattern. So visually, people could describe it as "half of the image doesn't appear". It took me a bit to understand what was the problem because the svg file was really long.

Long story short: either the pattern or the use wasn't finding #image-a in Safari which looks like it might be a scope issue.

I moved the image to be inside the pattern and it began to appear twice. Which made sense. So my solution was to delete the use and use the image directly inside the pattern .

The image ended up needing some adjustments to its width and height but this finally fixed it in all browsers.

Now I know.

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Ever wondered how cloud providers (PaaS) integrate with GitHub? I did.

Lucy Linder - Feb 6

Animating SVGs in React: Breathe Life into Your Images

Brian Baliach - Jan 29

vtable under the surface | Episode 3 - How virtual functions are actually called

Pierre Gradot - Jan 23

vtables under the surface | Episode 2 - ELF files

Pierre Gradot - Jan 5

We're a place where coders share, stay up-to-date and grow their careers.

SVG not rendered in Safari

I am using many SVG images on my site, yet some of them do not appear on the published site or the editor on Safari (and iOS devices, I couldn’t check any Android devices yet).

The SVGs which do not appear include some SVG animation (within the SVG file), as well as mouse interaction animation (3D Parallax Desktop, specified in the Webflow editor).

Opening the URL of these SVGs directly, displays them perfectly fine in all browsers.

Did anyone else stumble over this issue? I couldn’t find similar topics. Help is much appreciated!

Thanks a lot

It seems that Safari 13.1 does not render these SVGs within img tags.

Embedding the SVG with a HTML embed as <object type="image/svg+xml" data="some.svg"></object> did the trick.

Mine was doing the same thing, so I started messing with parts of the SVG code until I came to this conclusion. I had the SVG code written as <svg width="auto" height="auto" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>

I guess Safari doesn’t respond to SVG code that has a width and height of auto . So I rewrote the code to fit responsively for my particular use as <svg width="2em" height="2em" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"></svg>

Now it renders perfectly.

Hello at Slituo we found this working on Safari with paths:

Note that adding “width, height” in SVG and "fill-rule=“evenodd” clip-rule=“evenodd” in Path With “Stroke” in Path that not worked.

Note that I used “currentColor” for inheriting the current div color that allow me to use color editor

Looks like no one’s replied in a while. To start the conversation again, simply ask a new question.

Safari does not render <foreignObject /> in <SVG /> in <HTML /> correctly

This is a bug report on Safari Version 16.3 (17614.4.6.11.6, 17614) on macOS 12.6.3 (21G419) as well as Safari on iOS 16.3 (tested on an iPhone).

The attributes x, y of foreignObject are ignored, putting the top-left of the foreignObject at the top-left of the SVG box.
The attribute transform of foreignObject is ignored; it is not possible to translate or scale the foreignObject.
The content of the foreignObject is always rendered in the front of all the child elements of the <SVG />, while according to the spec an element (e.g. <circle />) that is specified further down in the list of the childs must be rendered in front the childs that come first, even if that is a foreignObject.

These specifications are applicable in both SVG and SVG2. Please align Safari with the standard specification:

https://www.w3.org/TR/SVG/embedded.html
https://www.w3.org/TR/SVG2/embedded.html

Posted on Mar 2, 2023 12:25 AM

Posted on Mar 3, 2023 1:51 PM

daenenk wrote:

• This is a bug report on Safari Version 16.3 ...

Ok, but this is not the place to file a bug report. Apple will not see it here.

Animation not working in Safari

With Safari's latest update (April, 2020) it becomes more and more important to pick the right method for adding SVG animation to your website. One of the most common reasons why the SVG animation doesn't work is the use of <img> tags to add the SVG. The SVG might be visible on the website, but the animation will not start.

You can easily fix this by replacing all <img> tags with an <object> tag. You can also open the SVG file in a text or code editor, copy the entire code and add it inline to your website.

As we've mentioned in one of our previous articles, it's also highly recommended to export JavaScript as the animation type instead of CSS from SVGator. JavaScript will support all advanced features such as morphing or starting the animation on click.

Still got questions? Send us an email to [email protected] and we will get back to you as soon as we can

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement . We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SVG color not working on Safari iOS #576

riccardoch commented Jul 15, 2021 • edited

dnfield commented Jul 15, 2021

Sorry, something went wrong.

bardia-mhd commented Jul 15, 2021

Riccardoch commented jul 16, 2021, dnfield commented jul 16, 2021, riccardoch commented jul 16, 2021 • edited.

👎 1 reaction
👍 1 reaction

No branches or pull requests

Fix SVG CSS animation issue in Safari

Safari 16 has trouble with CSS animations on SVG child elements, but you can resolve them by using a combined transform property.

Setup: You have an SVG that needs separate animations for its path and rect elements. Applying a single transform to the elements works, but combining multiple transforms results in nondeterministic animation bugs:

The fix: You can fix this by combining your transformations into multiple functions on a single transform property:

Try it out:

See the Pen Safari CSS animation SVG bug by Sean McPherson ( @SeanMcP ) on CodePen .

Takeaway: Individual properties for CSS transforms are nice, but they can cause issues with SVG animations in Safari. The safer option seems to be sticking with a single transform property for now.

https://stackoverflow.com/a/72022385/8486161
https://developer.mozilla.org/en-US/docs/Web/CSS/transform

Html – iOS Safari SVG in HTML img element not working

According to Can I Use the ability to reference a SVG in an <img/> element is well supported in iOS Safari. However in my site I am having a problem getting the image to render:

The HTML is rather simple:

And (according to curl) the SVG is being served with the Content-Type image/svg+xml :

Also it is valid SVG . Any ideas?

Best Answer

It turns out the image size inside the SVG is bound by the same limitations as a raster image in Mobile Safari. In the original SVG the root node looked like this:

This gave the image a total size of 12,146,148. According to Apple's Mobile Safari Documentation ( source )

Because of the memory available on iOS, there are limits on the number of resources it can process: The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.

It appears this applies to SVG as well. The Solution is to add a viewBox and then set the height and width to a value lower than the limit. Because the SVG is a vector image it will render at the maximum resolution for the display but the image will be treated as acceptable in Mobile Safari.

The root node now looks like this:

And the site now looks like this:

Html – Turn off iPhone/Safari input element rounding

On iOS 5 and later:

If you must only remove the rounded corners on iOS or otherwise for some reason cannot normalize rounded corners across platforms, use input { -webkit-border-radius: 0; } property instead, which is still supported. Of course do note that Apple can choose to drop support for the prefixed property at any time, but considering their other platform-specific CSS features chances are they'll keep it around.

On legacy versions you had to set -webkit-appearance: none instead:

WebKit Features in Safari 16.4

Mar 27, 2023

by Patrick Angle, Marcos Caceres, Razvan Caliman, Jon Davis, Brady Eidson, Timothy Hatcher, Ryosuke Niwa, and Jen Simmons

Web Push on iOS and iPadOS

Improvements for web apps, web components, javascript and webassembly, images, video, and audio, developer tooling, web inspector, safari web extensions, safari content blockers, new restrictions in lockdown mode, more improvements.

Today, we’re thrilled to tell you about the many additions to WebKit that are included in Safari 16.4. This release is packed with 135 new web features and over 280 polish updates. Let’s take a look.

You can experience Safari 16.4 on macOS Ventura , macOS Monterey, macOS Big Sur, iPadOS 16 , and iOS 16 . Update to Safari 16.4 on macOS Monterey or macOS Big Sur by going to System Preferences → Software Update → More info, and choosing to update Safari. Or update on macOS Ventura, iOS or iPadOS, by going to Settings → General → Software Update.

iOS and iPadOS 16.4 add support for Web Push to web apps added to the Home Screen. Web Push makes it possible for web developers to send push notifications to their users through the use of Push API , Notifications API , and Service Workers .

Deeply integrated with iOS and iPadOS, Web Push notifications from web apps work exactly like notifications from other apps. They show on the Lock Screen, in Notification Center, and on a paired Apple Watch. Focus provides ways for users to precisely configure when or where to receive Web Push notifications — putting users firmly in control of the experience. For more details, read Web Push for Web Apps on iOS and iPadOS .

WebKit on iOS and iPadOS 16.4 adds support for the Badging API . It allows web app developers to display an app badge count just like any other app on iOS or iPadOS. Permission for a Home Screen web app to use the Badging API is automatically granted when a user gives permission for notifications.

To support notifications and badging for multiple installs of the same web app, WebKit adds support for the id member of the Web Application Manifest standard. Doing so continues to provide users the convenience of saving multiple copies of a web app, perhaps logged in to different accounts separating work and personal usage — which is especially powerful when combined with the ability to customize Home Screen pages with different sets of apps for each Focus .

iOS and iPadOS 16.4 also add support so that third-party web browsers can offer “Add to Home Screen” in the Share menu. For the details on how browsers can implement support, as well more information about all the improvements to web apps, read Web Push for Web Apps on iOS and iPadOS .

We continue to care deeply about both the needs of a wide-range of web developers and the everyday experience of users. Please keep sending us your ideas and requests . There’s more work to do, and we couldn’t be more excited about where this space is headed.

Web Components is a suite of technologies that together make it possible to create reusable custom HTML elements with encapsulated functionality. Safari 16.4 improves support for Web Components with several powerful new capabilities.

Safari 16.4 adds support Declarative Shadow DOM, allowing developers to define shadow DOM without the use of JavaScript. And it adds support for ElementInternals , providing the basis for improved accessibility for web components, while enabling custom elements to participate in forms alongside built-in form elements.

Also, there’s now support for the Imperative Slot API. Slots define where content goes in the template of a custom element. The Imperative Slot API allows developers to specify the assigned node for a slot element in JavaScript for additional flexibility.

Safari 16.4 adds support for quite a few new CSS properties, values, pseudo-classes and syntaxes. We are proud to be leading the way in several areas to the future of graphic design on the web.

Margin Trim

The margin-trim property can be used to eliminate margins from elements that are abutting their container. For example, imagine we have a section element, and inside it we have content consisting of an h2 headline and several paragraphs. The section is styled as a card, with an off-white background and some padding. Like usual, the headline and paragraphs all have top and bottom margins — which provide space between them. But we actually don’t want a margin above the first headline, or after the last paragraph. Those margins get added to the padding, and create more space than what’s desired.

Often web developers handle this situation by removing the top margin on the headline with h2 { margin-block-start: 0 } and the bottom margin on the last paragraph with p:last-child { margin-block-end: 0 } — and hoping for the best. Problems occur, however, when unexpected content is placed in this box. Maybe another instance starts with an h3 , and no one wrote code to remove the top margin from that h3 . Or a second h2 is written into the text in the middle of the box, and now it’s missing the top margin that it needs.

The margin-trim property allows us to write more robust and flexible code. We can avoid removing margins from individual children, and instead put margin-trim: block on the container.

This communicates to the browser: please trim away any margins that butt up against the container. The rule margin-trim: block trims margins in the block direction, while margin-trim: inline trims margins in the inline direction.

Try this demo for yourself in Safari 16.4 or Safari Technology Preview to see the results.

Safari 16.4 also adds support for the new line height and root line height units, lh and rlh . Now you can set any measurement relative to the line-height. For example, perhaps you’d like to set the margin above and below your paragraphs to match your line-height.

The lh unit references the current line-height of an element, while the rlh unit references the root line height — much like em and rem.

Safari 16.4 adds support for font-size-adjust . This CSS property provides a way to preserve the apparent size and readability of text when different fonts are being used. While a web developer can tell the browser to typeset text using a specific font size, the reality is that different fonts will render as different visual sizes. You can especially see this difference when more than one font is used in a single paragraph. In the following demo , the body text is set with a serif font, while the code is typeset in a monospace font — and they do not look to be the same size. The resulting differences in x-height can be quite disruptive to reading. The demo also provides a range of font fallback options for different operating systems, which introduces even more complexity. Sometimes the monospace font is bigger than the body text, and other times it’s smaller, depending on which font family is actually used. The font-size-adjust property gives web developers a solution to this problem. In this case, we simply write code { font-size-adjust: 0.47; } to ask the browser to adjust the size of the code font to match the actual glyph size of the body font.

To round out support for the font size keywords, font-size: xxx-large is now supported in Safari 16.4.

Pseudo-classes

Safari 16.4 also adds support for several new pseudo-classes. Targeting a particular text direction, the :dir() pseudo-class lets you define styles depending on whether the language’s script flows ltr (left-to-right) or rtl ( right-to-left ). For example, perhaps you want to rotate a logo image a bit to the left or right, depending on the text direction:

Along with unprefixing the Fullscreen API (see below), the CSS :fullscreen pseudo-class is also now unprefixed. And in Safari 16.4, the :modal pseudo-class also matches fullscreen elements.

Safari 16.4 adds :has() support for the :lang pseudo-class, making it possible to style any part of a page when a particular language is being used on that page. In addition, the following media pseudo-classes now work dynamically inside of :has() , opening up a world of possibilities for styling when audio and video are in different states of being played or manipulated — :playing , :paused , :seeking , :buffering , :stalled , :picture-in-picture , :volume-locked , and :muted . To learn more about :has() , read Using :has() as a CSS Parent Selector and much more .

Safari 16.4 adds support for Relative Color Syntax. It provides a way to specify a color value in a much more dynamic fashion. Perhaps you want to use a hexadecimal value for blue, but make that color translucent — passing it into the hsl color space to do the calculation.

Or maybe you want to define a color as a variable, and then adjust that color using a mathematical formula in the lch color space, telling it to cut the lightness ( l ) in half with calc(l / 2) , while keeping the chroma ( c ) and hue ( h ) the same.

Relative Color Syntax is powerful. Originally appearing in Safari Technology Preview 122 in Feb 2021, we’ve been waiting for the CSS Working Group to complete its work so we could ship. There isn’t documentation on MDN or Can I Use about Relative Color Syntax yet, but likely will be soon. Meanwhile the Color 5 specification is the place to learn all about it.

Last December, Safari 16.2 added support for color-mix() . Another new way to specify a color value, the functional notation of color-mix makes it possible to tell a browser to mix two different colors together, using a certain color space .

Safari 16.4 adds support for using currentColor with color-mix() . For example, let’s say we want to grab whatever the current text color might be, and mix 50% of it with white to use as a hover color. And we want the mathematical calculations of the mixing to happen in the oklab color space. We can do exactly that with:

Safari 16.2 also added support for Gradient Interpolation Color Spaces last December. It allows the interpolation math of gradients — the method of determining intermediate color values — to happen across different color spaces. This illustration shows the differences between the default sRGB interpolation compared to interpolation in lab and lch color spaces:

Safari 16.4 adds support for the new system color keywords . Think of them as variables which represent the default colors established by the user, browser, or OS — defaults that change depending on whether the system is set to light mode, dark mode, high contrast mode, etc. For instance, Canvas represents the current default background color of the HTML page. Use system color keywords just like other named colors in CSS. For example, h4 { color: FieldText; } will style h4 headlines to match the default color of text inside form fields. When a user switches from light to dark mode, the h4 color will automatically change as well. Find the full list of system colors in CSS Color level 4 .

Media Queries Syntax Improvements

Safari 16.4 adds support for the syntax improvements from Media Queries level 4. Range syntax provides an alternative way to write out a range of values for width or height. For example, if you want to define styles that are applied when the browser viewport is between 400 and 900 pixels wide, in the original Media Query syntax, you would have written:

Now with the new syntax from Media Queries level 4, you can instead write:

This is the same range syntax that’s been part of Container Queries from its beginning, which shipped in Safari 16.0 .

Media Queries level 4 also brings more understandable syntax for combining queries using boolean logic with and , not , and or . For example:

Can instead be greatly simplified as:

Or, along with the range syntax changes, as:

Custom Properties

Safari 16.4 adds support for CSS Properties and Values API with support for the @property at-rule. It greatly extends the capabilities of CSS variables by allowing developers to specify the syntax of the variable, the inheritance behavior, and the variable initial value — similar to how browser engines define CSS properties.

With @property support, developers can to do things in CSS that were impossible before, like animate gradients or specific parts of transforms.

Web Animations

Safari 16.4 includes some additional improvements for web animations. You can animate custom properties. Animating the blending of mismatched filter lists is now supported. And Safari now supports KeyframeEffect.iterationComposite .

Outline + Border Radius

Until now, if a web developer styled an element that had an outline with a custom outline-style , and that element had curved corners, the outline would not follow the curve in Safari. Now in Safari 16.4, outline always follows the curve of border-radius .

CSS Typed OM

Safari 16.4 adds support for CSS Typed OM , which can be used to expose CSS values as typed JavaScript objects. Input validation for CSSColorValues is also supported as part of CSS Typed OM. Support for Constructible and Adoptable CSSStyleSheet objects also comes to Safari 16.4.

Safari 16.4 now supports lazy loading iframes with loading="lazy" . You might put it on a video embed iframe, for example , to let the browser know if this element is offscreen, it doesn’t need to load until the user is about to scroll it into view.

By the way, you should always include the height and width attributes on iframes, so browsers can reserve space in the layout for it before the iframe has loaded. If you resize the iframe with CSS, be sure to define both width and height in your CSS. You can also use the aspect-ratio property to make sure an iframe keeps it’s shape as it’s resized by CSS.

Now in Safari 16.4, a gray line no longer appears to mark the space where a lazy-loaded image will appear once it’s been loaded.

Safari 16.4 also includes two improvements for <input type="file"> . Now a thumbnail of a selected file will appear on macOS. And the cancel event is supported.

Safari 16.4 brings a number of useful new additions for developers in JavaScript and WebAssembly.

RegExp Lookbehind makes it possible to write Regular Expressions that check what’s before your regexp match. For example, match patterns like (?<=foo)bar matches bar only when there is a foo before it. It works for both positive and negative lookbehind.

JavaScript Import Maps give web developers the same sort of versioned file mapping used in other module systems, without the need for a build step.

Growable SharedArrayBuffer provided a more efficient mechanism for growing an existing buffer for generic raw binary data. And resizable ArrayBuffer allows for resizing of a byte array in JavaScript.

In WebAssembly, we’ve added support for 128-bit SIMD.

Safari 16.4 also includes:

Array.fromAsync
Array#group and Array#groupToMap
Atomics.waitAsync
import.meta.resolve()
Intl.DurationFormat
String#isWellFormed and String#toWellFormed
class static initialization blocks
Symbols in WeakMap and WeakSet

Safari 16.4 adds support for quite a few new Web API. We prioritized the features you’ve told us you need most.

Offscreen Canvas

When using Canvas, the rendering, animation, and user interaction usually happens on the main execution thread of a web application. Offscreen Canvas provides a canvas that can be rendered off screen, decoupling the DOM and the Canvas API so that the <canvas> element is no longer entirely dependent on the DOM. Rendering can now also be transferred to a worker context, allowing developers to run tasks in a separate thread and avoid heavy work on the main thread that can negatively impact the user experience. The combination of DOM-independent operations and rendering of the main thread can provide a significantly better experience for users, especially on low-power devices. In Safari 16.4 we’ve added Offscreen Canvas support for 2D operations. Support for 3D in Offscreen Canvas is in development.

Fullscreen API

Safari 16.4 now supports the updated and unprefixed Fullscreen API on macOS and iPadOS. Fullscreen API provides a way to present a DOM element’s content so that it fills the user’s entire screen, and to exit fullscreen mode once it’s unneeded. The user is given control over exiting fullscreen mode through various mechanisms, include pressing the ‘Esc’ key on the keyboard, or performing a downwards gesture on touch-enabled devices. This ensures that the user always has the ability to exit fullscreen whenever they desire, preserving their control over the browsing experience.

Screen Orientation API

Along with the Fullscreen API we’ve added preliminary support for Screen Orientation API in Safari 16.4, including:

ScreenOrientation.prototype.type returns the screen’s current orientation.
ScreenOrientation.prototype.angle returns the screen’s current orientation angle.
ScreenOrientation.prototype.onchange event handler, which fires whenever the screen changes orientation.

Support for the lock() and unlock() methods remain experimental features for the time being. If you’d like to try them out, you can enable them in the Settings app on iOS and iPadOS 16.4 via Safari → Advanced → Experimental Features → Screen Orientation API (Locking / Unlocking).

Screen Wake Lock API

The Screen Wake Lock API provides a mechanism to prevent devices from dimming or locking the screen. The API is useful for any application that requires the screen to stay on for an extended period of time to provide uninterrupted user experience, such as a cooking site, or for displaying a QR code.

User Activation API

User Activation API provides web developers with a means to check whether a user meaningfully interacted with a web page. This is useful as some APIs require meaningful “user activation”, such as, a click or touch, before they can be used. Because user activation is based on a timer, the API can be used to check if document currently has user activation as otherwise a call to an API would fail. Read The User Activation API for more details and usage examples.

WebGL Canvas Wide Gamut Color

WebGL canvas now supports the display-p3 wide-gamut color space. To learn more about color space support, read Improving Color on the Web , Wide Gamut Color in CSS with Display-P3 , and Wide Gamut 2D Graphics using HTML Canvas .

Compression Streams API

Compression Streams API allows for compressing and decompressing streams of data in directly in the browser, reducing the need for a third-party JavaScript compression library. This is handy if you need to “gzip” a stream of data to send to a server or to save on the user’s device.

Safari 16.4 also includes many other new Web API features, including:

Reporting API
Notification API in dedicated workers
Permissions API for dedicated workers
Service Workers and Shared Workers to the Permissions API
gamepad.vibrationActuator
A submitter parameter in the FormData constructor
COEP violation reporting
COOP/COEP navigation violation reporting
Fetch Initiator
Fetch Metadata Request Headers
importing compressed EC keys in WebCrypto
loading scripts for nested workers
non-autofill credential type for the autocomplete attribute
revoking Blob URLs across same-origin contexts
isComposing attribute on InputEvent
termination of nested workers
transfer size metrics for first parties in ServerTiming and PerformanceResourceTiming
KeyframeEffect.iterationComposite
WEBGL_clip_cull_distance

Last fall, Safari 16 brought support for AVIF images to iOS 16, iPadOS 16 and macOS Ventura. Now with Safari 16.4, AVIF is also supported on macOS Monterey and macOS Big Sur. Updates to our AVIF implementation ensure animated images and images with film grain (noise synthesis) are now fully supported, and that AVIF works inside the <picture> element. We’ve also updated our AVIF implementation to be more lenient in accepting and displaying images that don’t properly conform to the AVIF standard.

Safari 16.4 adds support for the video portion of Web Codecs API . This gives web developers complete control over how media is processed by providing low-level access to the individual frames of a video stream. It’s especially useful for applications that do video editing, video conferencing, or other real-time processing of video.

Media features new to Safari 16.4 also include:

Improvements to audio quality for web video conferencing
Support for a subset of the AudioSession Web API
Support for AVCapture virtual cameras
Support for inbound rtp trackIdentifier stat field
Support for VTT-based extended audio descriptions
Support to allow a site to provide an “alternate” URL to be used during AirPlay

WKPreferences , used by WKWebView on iOS and iPadOS 16.4, adds a new shouldPrintBackgrounds API that allows clients to opt-in to including a pages’s background when printing.

Inspectable WebKit and JavaScriptCore API

Across all platforms supporting WKWebView or JSContext , a new property is available called isInspectable ( inspectable in Objective-C) on macOS 13.4 and iOS, iPadOS, and tvOS 16.4. It defaults to false , and you can set it to true to opt-in to content being inspectable using Web Inspector, even in release builds of apps.

Develop Menu > Patrick's iPhone > Example App

When an app has enabled inspection, it can be inspected from Safari’s Develop menu in the submenu for either the current computer or an attached device. For iOS and iPadOS, you must also have enabled Web Inspector in the Settings app under Safari > Advanced > Web Inspector .

To learn more, read Enabling the Inspection of Web Content in Apps .

When automating Safari 16.4 with safaridriver , we now supports commands for getting elements inside shadow roots, as well as accessibility commands for getting the computed role and label of elements. When adding a cookie with safaridriver , the SameSite attribute is now supported. Improvements have also been made to performing keyboard actions, including better support for modifier keys behind held and support for typing characters represented by multiple code points, including emoji. These improvements make writing cross-browser tests for your website even easier.

Typography Tooling

Web Inspector in Safari 16.4 adds new typography inspection capabilities in the Fonts details sidebar of the Elements Tab.

Warnings are now shown for synthesized bold and oblique when the rendering engine has to generate these styles for a font that doesn’t provide a suitable style. This may be an indicator that the font file for a declared @font-face was not loaded. Or it may be that the specific value for font-weight or font-style isn’t supported by the used font.

A variable font is a font format that contains instructions on how to generate, from a single file, multiple style variations, such as weight, stretch, slant, optical sizing, and others. Some variable fonts allow for a lot of fine-tuning of their appearance, like the stroke thickness, the ascender height or descender depth, and even the curves or roundness of particular glyphs. These characteristics are expressed as variation axes and they each have a custom value range defined by the type designer.

The Fonts details sidebar now provides interactive controls to adjust values of variation axes exposed by a variable font and see the results live on the inspected page allowing you to get the font style that’s exactly right for you.

Tooling for Conditionals in CSS

The controls under the new User Preference Overrides popover in the Elements Tab allow you to emulate the states of media features like prefers-reduced-motion and prefers-contrast to ensure that the web content you create adapts to the user’s needs. The toggle to emulate the states of prefers-color-scheme , which was previously a standalone button, has moved to this new popover.

The Styles panel of the Elements Tab now allows editing the condition text for @media , @container and @supports CSS rules. This allows you to make adjustments in-context and immediately see the results on the inspected page. Here’s a quick tip: edit the condition of @supports to its inverse, like @supports not (display: grid) , to quickly check your progressive enhancement approach to styling and layout.

Badging HTML Elements

New badges for elements in the DOM tree of the Elements Tab join the existing badges for Grid and Flex containers. The new Scroll badge calls out scrollable elements, and the new Events badge provides quick access to the event listeners associated with the element when clicked. And a new Badges toolbar item makes it easy to show just the badges you are interested in and hide others.

Changes to Web Inspector in Safari 16.4 also include:

Elements Tab: Improved visual hierarchy of the Layout sidebar.
Elements Tab: Added support for nodes that aren’t visible on the page to appear dimmed in the DOM tree.
Console Tab: Added support for console snippets.
Sources Tab: Added showing relevant special breakpoints in the Pause Reason section.
Sources Tab: Added support for inline breakpoints.
Sources Tab: Added support for symbolic breakpoints
Network Tab: Added a Path column.
Network Tab: Added alphabetic sorting of headers.
Network Tab: Added support for per-page network throttling.
Network Tab: Added using the Shift key to highlight the initiator or initiated resources.
Graphics Tab: Added OpenGL object IDs in the Canvas inspector.
Settings Tab: Added a setting to turn off dimming nodes that aren’t visible on the page.
Added support for function breakpoints and tracepoints.

Enhancements to Declarative Net Request

Safari is always working on improving support for declarativeNetRequest , the declarative way for web extensions to block and modify network requests. In Safari 16.4, several enhancements have been added to the API:

The declarativeNetRequest.setExtensionActionOptions API can be used to configure whether to automatically display the action count (number of blocked loads, etc.) as the extension’s badge text.
The modifyHeaders action type has been added to rewrite request and response headers. This action requires granted website permissions for the affected domains and the declarativeNetRequestWithHostAccess permission in the manifest.
The redirect action type now requires the declarativeNetRequestWithHostAccess permission in the manifest.
The MAX_NUMBER_OF_DYNAMIC_AND_SESSION_RULES property has been added to check the maximum number of combined dynamic and session rules an extension can add. The current limit is set at 5,000 rules.

These enhancements give developers more options to customize their content blocking extensions and provide users with better privacy protection.

SVG Icon Support in Web Extensions

Safari 16.4 now supports SVG images as extension and action icons, giving developers more options for creating high-quality extensions. This support brings Safari in line with Firefox, allowing for consistent experiences across platforms. The ability to scale vector icons appropriately for any device means developers no longer need multiple sizes, simplifying the process of creating polished and professional-looking extensions.

Dynamic Content Scripts

Safari 16.4 introduces support for the new scripting.registerContentScript API, which enables developers to create dynamic content scripts that can be registered, updated, or removed programmatically. This API augments the static content scripts declared in the extension manifest, providing developers with more flexibility in managing content scripts and enabling them to create more advanced features for their extensions.

Toggle Reader Mode

The tabs.toggleReaderMode API has been added to Safari 16.4, which enables extensions to toggle Reader Mode for any tab. This function is particularly useful for extensions that want to enhance the user’s browsing experience by allowing them to focus on the content they want to read. By using this API, developers can create extensions that automate the process of enabling Reader Mode for articles, making it easier and more convenient for users to read online content.

Session Storage

The storage.session API, now supported in Safari 16.4, enables extensions to store data in memory for the duration of the browser session, making it a useful tool for storing data that takes a long time to compute or is needed quickly between non-persistent background page loads. This API is particularly useful for storing sensitive or security-related data, such as decryption keys or authentication tokens, that would be inappropriate to store in local storage. The session storage area is not persisted to disk and is cleared when Safari quits, providing enhanced security and privacy for users.

Background Modules

Developers can now take advantage of modules in background service workers and pages by setting "type": "module" in the background section of the manifest. This allows for more organized and maintainable extension code, making it easier to manage complex codebases. By setting this option, background scripts will be loaded as ES modules, enabling the use of import statements to load dependencies and use the latest JavaScript language features.

Safari 16.4 has added support for :has() selectors in Safari Content Blocker rules. This is a powerful new addition to the declarative content blocking capabilities of Safari, as it allows developers to select and hide parent elements that contain certain child elements. Its inclusion in Safari Content Blocker rules opens up a whole new range of possibilities for content blocking. Now developers can create more nuanced and precise rules that can target specific parts of a web page, making it easier to block unwanted content while preserving the user’s browsing experience. This is yet another example of Safari’s commitment to providing a secure and private browsing experience for its users while also offering developers the tools they need to create innovative and effective extensions.

Lockdown Mode is an optional, extreme protection that’s designed for the very few individuals who, because of who they are or what they do, might be personally targeted by some of the most sophisticated digital threats. Most people are never targeted by attacks of this nature.

If a user chooses to enable Lockdown mode on iOS 16.4, iPadOS 16.4, or macOS Ventura 13.3, Safari will now:

Disable binary fonts in the CSS Font Loading API
Disable Cache API
Disable CacheStorage API
Disable ServiceWorkers
Disable SVG fonts
Disable the WebLocks API
Disable WebSpeech API

Safari 16.4 now supports dark mode for plain text files. It has support for smooth key-driven scrolling on macOS. And it adds prevention of redirects to data: or about: URLs.

In addition to the 135 new features, WebKit for Safari 16.4 includes an incredible amount work polishing existing features. We’ve heard from you that you want to know more about the many fixes going into each release of Safari. We’ve done our best to list everything that might be of interest to developers, in this case, 280 of those improvements:

Fixed -webkit-mask-box-image: initial to set the correct initial value.
Fixed -webkit-radial-gradient parsing accidentally treating several mandatory commas as optional.
Fixed ::placeholder to not support writing-mode , direction , or text-orientation.
Fixed @supports to not work if not , or , or and isn’t followed by a space.
Fixed background-repeat not getting correctly exposed through inline styles.
Fixed baseline-shift to allow length or percentage, but not numbers.
Fixed contain: inline-size for replaced elements.
Fixed CSSPerspective.toMatrix() to throw a TypeError if its length is incompatible with the px unit.
Fixed cx , cy , x , and y CSS properties to allow length or percentage, but not numbers.
Fixed filter: blur on an absolutely positioned image losing overflow: hidden .
Fixed font-face to accept ranges in reverse order, and reverse them for computed styles.
Fixed font-style: oblique must allow angles equal to 90deg or -90deg.
Fixed font-style: oblique with calc() to allow out-of-range angles and clamp them for computed style.
Fixed font-weight to clamp to 1 as a minimum.
Fixed font shorthand to reject out-of-range angles for font-style .
Fixed font shorthand to reset more longhand properties.
Fixed overflow-x: clip causing a sibling image to not load.
Fixed overflow: clip not working on SVG elements.
Fixed stroke-dasharray parsing to align with standards.
Fixed stroke-width and stroke-dashoffset parsing to align with standards.
Fixed text-decoration-thickness property not repainting when changed.
Fixed allowing calc() that combines percentages and lengths for line-height .
Fixed an issue where using box-sizing: border-box causes the calculated aspect-ratio to create negative content sizes.
Fixed an issue with a monospace font on a parent causing children with a sans-serif font using rem or rlh units to grow to a larger size.
Fixed behavior of cursor: auto over links.
Fixed buttons with auto width and height to not set intrinsic margins.
Fixed calculating block size to use the correct box-sizing with aspect ratio.
Fixed cells overflowing their contents when a table cell has inline children which change writing-mode .
Fixed clipping perspective calc() values to 0.
Fixed font shorthand to not reject values that happen to have CSS-wide keywords as non-first identifiers in a font family name.
Fixed hit testing for double-click selection on overflowing inline content.
Fixed honoring the content block size minimum for a <fieldset> element with aspect-ratio applied.
Fixed incorrectly positioned line break in contenteditable with tabs.
Fixed invalidation for class names within :nth-child() selector lists.
Fixed omitting the normal value for line-height from the font shorthand in the specified style, not just the computed style.
Fixed pseudo-elements to not be treated as ASCII case-insensitive.
Fixed rejecting a selector argument for :nth-of-type or :nth-last-of-type .
Fixed serialization order for contain .
Fixed strings not wrapped at zero width spaces when word-break: keep-all is set.
Fixed supporting <string> as an unprefixed keyframe name.
Fixed the :has() pseudo-selector parsing to be unforgiving.
Fixed the font-face src descriptor format to allow only specified formats, others are a parse error.
Fixed the tz component not accounting for zoom when creating a matrix3d () value.
Fixed the computed value for stroke-dasharray to be in px .
Fixed the effect of the writing-mode property not getting removed when the property is removed from the root element.
Fixed the position of text-shadow used with text-combine-upright .
Fixed the title of a style element with an invalid type to never be added to preferred stylesheet set.
Fixed the transferred min/max sizes to be constrained by defined sizes for aspect ratio.
Fixed the user-agent stylesheet to align hidden elements, abbr , acronym , marquee , and fieldset with HTML specifications.
Fixed to always use percentages for computed values of font-stretch , never keywords.
Fixed to not require whitespace between of and the selector list in :nth-child or :nth-last-child .
Fixed CSS.supports returning false for custom properties.
Fixed CSS.supports whitespace handling with !important .
Fixed forgiving selectors to not be reported as supported with CSS.supports("selector(...)") .
Fixed getComputedStyle() to return a function list for the transform property.
Fixed linear-gradient keyword values not getting converted to their rgb() equivalents for getComputedStyle() .

Content Security Policy

Fixed updating the Content Security Policy when a new header is sent as part of a 304 response.
Fixed <input type="submit"> , <input type="reset">, and <input type="button"> to honor font-size , padding , height , and work with multi-line values.
Fixed firing the change event for <input type="file"> when a different file with the same name is selected.
Fixed preventing a disabled <fieldset> element from getting focus.
Fixed the :out-of-range pseudo class matching for empty input[type=number] .
Fixed Array.prototype.indexOf constant-folding to account for a non-numeric index.
Fixed Intl.NumberFormat useGrouping handling to match updated specs.
Fixed Intl.NumberFormat ignoring maximumFractionDigits with compact notation.
Fixed String.prototype.includes incorrectly returning false when the string is empty and the position is past end of the string.
Fixed toLocaleLowerCase and toLocaleUpperCase to throw an exception on an empty string.
Fixed aligning the parsing of <body link vlink alink> to follow standards.
Fixed <legend> to accept more display property values than display: block .

Intelligent Tracking Prevention

Fixed user initiated cross-domain link navigations getting counted as Top Frame Redirects.
Fixed some display issues with HDR AVIF images.
Fixed the accept header to correctly indicate AVIF support.

Lockdown Mode

Fixed common cases of missing glyphs due to custom icon fonts.
Fixed enumerateDevices may return filtered devices even if page is capturing.
Fixed MediaRecorder.stop() firing an additional dataavailable event with bytes after MediaRecorder.pause() .
Fixed duplicate timeupdate events.
Fixed limiting DOMAudioSession to third-party iframes with microphone access.
Fixed MSE to not seek with no seekable range.
Fixed mute microphone capture if capture fails to start because microphone is used by a high priority application.
Fixed not allowing text selection to start on an HTMLMediaElement.
Fixed only requiring a transient user activation for Web Audio rendering.
Fixed screen capture to fail gracefully if the window or screen selection takes too long.
Fixed switching to alternate <source> element for AirPlay when necessary.
Fixed the local WebRTC video element pausing after bluetooth audioinput is disconnected.
Fixed trying to use low latency for WebRTC HEVC encoder when available.
Fixed unmuting a TikTok video pauses it.
Fixed WebVTT styles not applied with in-band tracks.
Ensured negative letter-spacing does not pull content outside of the inline box
Fixed <div> with border-radius not painted correctly while using jQuery’s .slideToggle() .
Fixed border-radius clipping on composited layers.
Fixed box-shadow to paint correctly on inline elements.
Fixed box-shadow invalidation on inline boxes.
Fixed calculating the width of an inline text box using simplified measuring to handle fonts with Zero Width Joiner , Zero Width Non-Joner , or Zero Width No-Break Space .
Fixed clearing floats added dynamically to previous siblings.
Fixed clipping the source image when the source rectangle is outside of the source image in canvas.
Fixed CSS keyframes names to not allow CSS wide keywords.
Fixed elements with negative margins not avoiding floats when appropriate.
Fixed floating boxes overlapping with their margin boxes.
Fixed HTMLImageElement width and height to update layout to return styled dimensions not the image attributes.
Fixed ignoring nowrap on <td nowrap="nowrap"> when an absolute width is specified.
Fixed incorrect clipping when a layer is present between the column and the content layer.
Fixed incorrect static position of absolute positioned elements inside relative positioned containers.
Fixed layout for fixed position elements relative to a transformed container.
Fixed layout overflow rectangle overflows interfering with the scrollbar.
Fixed negative shadow repaint issue.
Fixed preventing a focus ring from being painted for anonymous block continuations.
Fixed recalculating intrinsic widths in the old containing block chain when an object goes out of flow.
Fixed rendering extreme border-radius values.
Fixed specified hue interpolation method for hues less than 0 or greater than 360.
Fixed tab handling in right-to-left editing.
Fixed text selection on flex and grid box items.
Fixed the position and thickness of underlines to be device pixel aligned.
Fixed transforms for table sections.
Fixed transition ellipsis box from “being a display box on the line” to “being an attachment” of the line box.
Fixed unexpected overlapping selection with tab in right-to-left context.
Fixed updating table rows during simplified layout.
Fixed: improved balancing for border, padding, and empty block content.
Extensions that request the unlimitedStorage permission no longer need to also request storage .
Fixed browser.declarativeNetRequest namespace is now available when an extension has the declarativeNetRequestWithHostAccess permission.
Fixed isUrlFilterCaseSensitive declarativeNetRequest rule condition to be false by default.
Fixed tabs.onUpdated getting called on tabs that were already closed.
Fixed background service worker failing to import scripts.
Fixed content scripts not injecting into subframes when extension accesses the page after a navigation.
Fixed CORS issue when doing fetch requests from a background service worker.
Fixed declarativeNetRequest errors not appearing correctly in the extension’s pane of Safari Settings.
Fixed display of extension cookie storage in Web Inspector. Now the extension name is shown instead of a UUID.
Fixed declarativeNetRequest rules not loading when an extension is turned off and then on.
Fixed result of getMatchedRules() to match other browsers.
Fixed browser.webNavigation events firing for hosts where the extension did not have access.
Removed Keyboard Shortcut conflict warnings for browser.commands when there are multiple commands without keyboard shortcuts assigned.
Fixed overscroll-behavior: none to prevent overscroll when the page is too small to scroll.
Fixed <svg:text> to not auto-wrap.
Fixed preserveAspectRatio to stop accepting defer .
Fixed SVG.currentScale to only set the page zoom for a standalone SVG.
Fixed svgElement.setCurrentTime to restrict floats to finite values.
Fixed applying changes to fill with currentColor to other colors via CSS.
Fixed changes to the filter property getting ignored.
Fixed CSS and SVG filters resulting in a low quality, pixelated image.
Fixed focusability even when tab-to-links is enabled for <svg:a> .
Fixed handling animation freezes when repeatDur is not a multiple of dur .
Fixed making sure computed values for baseline-shift CSS property use px unit for lengths.
Fixed not forcing display: table-cell , display: inline-table , display: table , and float: none on table cell elements when in quirks mode.
Fixed removing the visual border when the table border attribute is removed.
Fixed font-optical-sizing: auto having no effect in Safari 16.
Fixed directionality of the <bdi> and <input> elements to align with HTML specifications.
Fixed handling an invalid dir attribute to not affect directionality.
Fixed the default oblique angle from 20deg to 14deg .
Fixed the handling of <bdo> .
Fixed the order of how @font-palette-values override-colors are applied.
Fixed @keyframes rules using an inherit value to update the resolved value when the parent style changes.
Fixed Animation.commitStyles() triggering a mutation even when the styles are unchanged.
Fixed Animation.startTime and Animation.currentTime setters support for CSSNumberish values.
Fixed baseline-shift animation.
Fixed baselineShift inherited changes.
Fixed commitStyles() failing to commit a relative line-height value.
Fixed getKeyframes() serialization of CSS values for an onkeyframe sequence.
Fixed rotate: x and transform: rotate(x) to yield the same behavior with SVGs.
Fixed word-spacing to support animating between percentage and fixed values.
Fixed accounting for non-inherited CSS variables getting interpolated for standard properties on the same element.
Fixed accumulating and clamping filter values when blending with "none" .
Fixed accumulation support for the filter property.
Fixed additivity support for the filter property.
Fixed animation of color list custom properties with iterationComposite .
Fixed blend transform when iterationComposite is set to accumulate .
Fixed blending to account for iterationComposite .
Fixed Calculating computed keyframes for shorthand properties.
Fixed composite animations to compute blended additive or accumulative keyframes for in-between keyframes.
Fixed computing the keyTimes index correctly for discrete values animations.
Fixed CSS animations participation in the cascade.
Fixed custom properties to support interpolation with a single keyframe.
Fixed filter values containing a url() should animate discretely.
Fixed interpolating custom properties to take iterationComposite into account.
Fixed jittering when animating a rotated image.
Fixed keyframes to be recomputed if a custom property registration changes.
Fixed keyframes to be recomputed if the CSS variable used is changed.
Fixed keyframes to be recomputed when bolder or lighter is used on a font-weight property.
Fixed keyframes to be recomputed when a parent element changes value for a custom property set to inherit .
Fixed keyframes to be recomputed when a parent element changes value for a non-inherited property set to inherit .
Fixed keyframes to be recomputed when the currentcolor value is used on a custom property.
Fixed keyframes to be recomputed when the currentcolor value is used.
Fixed opacity to use unclamped values for from and to keyframes with iterationComposite .
Fixed running a transition on an inherited CSS variable getting reflected on a standard property using that variable as a value.
Fixed seamlessly updating the playback rate of an animation.
Fixed setting iterationComposite should invalidate the effect.
Fixed setting the transition-property to none does not disassociate the CSS Transition from owning the element.
Fixed the composite operation of implicit keyframes for CSS Animations to return "replace" .
Fixed the timing model for updating animations and sending events.
Fixed updating timing to invalidate the effect.
Fixed -webkit-user-select: none allowing text to be copied to clipboard.
Fixed contentEditable caret getting left aligned instead of centered when the :before pseudo-element is used.
Fixed Cross-Origin-Embedder-Policy incorrectly blocking scripts on cache hit.
Fixed CSSRule.type to not return values greater than 15.
Fixed document.open() to abort all loads when the document is navigating.
Fixed document.open() to remove the initial about:blank -ness of the document.
Fixed Element.querySelectorAll not obeying element scope with ID.
Fixed FileSystemSyncAccessHandle write operation to be quota protected.
Fixed getBoundingClientRect() returning the wrong value for <tr> , <td> , and its descendants for a vertical table.
Fixed HTMLOutputElement.htmlFor to make it settable.
Fixed queryCommandValue("stylewithcss") to always return an empty string.
Fixed StorageEvent.initStorageEvent() to align with HTML specifications.
Fixed textContent leaving dir=auto content in the wrong direction.
Fixed -webkit-user-select: initial content within -webkit-user-select: none should be copied
Fixed WorkerGlobalScope.isSecureContext to be based on the owner’s top URL, not the owner’s URL.
Fixed a bug where mousedown without mouseup in a frame prevents a click event in another frame.
Fixed a sometimes incorrect location after exiting mouse hover.
Fixed accepting image/jpg for compatibility.
Fixed adding a non-breaking space, instead of a plain space, when it is inserted before an empty text node.
Fixed behavior of nested click event on a label element with a checkbox.
Fixed BroadcastChannel in a SharedWorker when hosted in a cross-origin iframe.
Fixed calculation of direction for text form control elements with dir="auto" .
Fixed canvas fallback content focusability computation.
Fixed deleting a button element leaving the button’s style in a contenteditable element.
Fixed disconnected <fieldset> elements sometimes incorrectly matching :valid or :invalid selectors.
Fixed dragging the mouse over a -webkit-user-select: none node can begin selection in another node.
Fixed ensuring nested workers get controlled if matching a service worker registration.
Fixed errors caught and reported for importScripts() .
Fixed escaping “&” in JavaScript URLs for innerHTML and outerHTML .
Fixed EventSource to stop allowing trailing data when parsing a retry delay.
Fixed Fetch Request object to keep its Blob URL alive.
Fixed filled text on a canvas with a web font refreshing or disappearing.
Fixed find on page failing to show results in PDFs.
Fixed firing an error event when link preload fails synchronously.
Fixed form submissions to cancel JavaScript URL navigations.
Fixed handing the onerror content attribute on body and frameset elements.
Fixed handling opaque origin Blob URLs.
Fixed handling text documents to align to modern HTML specifications.
Fixed handling the onerror content attribute on <body> and <frameset> elements.
Fixed HTMLTemplateElement to have a shadowRootMode attribute.
Fixed including alternate stylesheets in document.styleSheets .
Fixed incorrect caret movement in some right-to-left contenteditable elements.
Fixed incorrect color for videos loaded in a canvas.
Fixed incorrect image srcset candidate chosen for <img> cloned from <template> .
Fixed incorrectly ignored X-Frame-Options HTTP headers with an empty value.
Fixed lazy loading images sometimes not loading.
Fixed link elements to be able to fire more than one load or error event.
Fixed loading Blob URLs with a fragment from opaque, unique origins.
Fixed maintaining the original Content-Type header on a 303 HTTP redirect.
Fixed module scripts to always decode using UTF-8.
Fixed MouseEventInit to take movementX and movementY .
Fixed not dispatching a progress event when reading an empty file or blob using the FileReader API.
Fixed not replacing the current history item when navigating a cross-origin iframe to the same URL.
Fixed overriding the mimetype for an XHR.
Fixed parsing of negative age values in CORS prefetch responses.
Fixed pasting of the first newline into text area.
Fixed preventing selection for generated counters in ordered lists.
Fixed Safari frequently using stale cached resources despite using Reload Page From Origin.
Fixed scheduling a navigation to a Blob URL to keep the URL alive until the navigation occurs.
Fixed sending Basic authentication via XHR using setRequestHeader() when there is an existing session.
Fixed setting style="" to destroy the element’s inline style.
Fixed setting the tabIndex of a non-focusable HTMLElement.
Fixed system colors not respecting inherited color-scheme values.
Fixed textarea placeholder text not disappearing when text is inserted without a user gesture.
Fixed the event.keyIdentifier value for F10 and F11 keys.
Fixed the click event to not get suppressed on textarea resize.
Fixed the computed value for the transform property with SkewY .
Fixed the initialization of color properties.
Fixed timing of ResizeObserver and IntersectionObserver to match other browsers.
Fixed toggling a details element when a summary element receives a click() .
Fixed updating Text node children of an option element to not reset the selection of the select element.
Fixed using NFC Security Key on iOS.
Fixed using WebAuthn credentials registered on iOS 15 if iCloud Keychain is disabled.
Fixed WebAuthn sending Attestation as None when requested as Direct.
Fixed XHR aborting to align with standards specification
Fixed XHR error events to return 0 for loaded and total.
Fixed: Made all FileSystemSyncAccessHandle methods synchronous.
Fixed: Removed the precision="float" attribute on <input type="range"> .
Fixed video textures set to repeat.
Fixed “Inspect Element” not highlighting the element.
Fixed capturing async stack traces for queueMicrotask .
Fixed clicking coalesced events in the timeline selecting the wrong event.
Fixed event breakpoints to support case-insensitive and RegExp matching.
Fixed slow search with a lot of files in the Open Resource dialog.
Fixed sorting prefixed properties below non-prefixed properties in the Computed panel of the Elements Tab.
Fixed the always empty Attributes section in the Node panel of the Elements Tab.
Fixed the Computed Tab scrolling to the top when a <style> is added to the page.
Fixed URL breakpoints to also pause when HTML attributes are set that trigger loads.
Fixed “Get Element Rect” to not round to integer values.
Fixed automation sessions terminating during navigation.
Fixed click element failing on iPad when Stage Manager is disabled.
Fixed HTTP GET requests with a body failing.
Fixed the Shift modifier key not applying to typed text.

We love hearing from you. Send a tweet to @webkit to share your thoughts on Safari 16.4. Find us on Mastodon at @[email protected] and @[email protected] . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technology or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview to stay at the forefront of the web platform and to use the latest Web Inspector features. You can also read the Safari 16.4 release notes .

How to fix Safari not downloading files on iPhone, iPad, and Mac

You may, at times, encounter an issue where Safari refuses to download photos, videos, audio, PDFs, documents, and other files from a website. In this article, we’ll explore common reasons why Safari may not be downloading files on iPhone, iPad, or Mac and provide solutions to help you get back to downloading with ease.

The issues you may be facing

Clicking the download link opens a new blank tab, and no file download starts.
Safari is refusing to begin file downloads from one or all sites.
File download starts, but it fails immediately in a second or two.
The download happens up to a point and then fails midway or just before completing.
Safari downloads a file but opens it and then deletes the original files (this happens with ZIP and other compressed files).

The solutions below should help fix all the above issues and also ones similar to them.

Before you begin

It’s possible that you’re not following the right steps to download the file. On Mac, it’s super easy, but on iPhone and iPad, downloading files may not be as obvious. With that said, even if the file has been downloaded, you may not know where it’s saved and how to find it. So, look at these tutorials, if needed:

How to download videos from Safari on iPhone and iPad
How to download files and documents to iPhone or iPad
How to access downloaded files on iPhone and iPad

Retry the download

In many cases, initiating the download again does the trick. Try hitting the download link again, and it should work. If not, refresh the webpage and click the download button again.

Note: Some websites put downloads behind a login wall. So, make sure to honor that.

Pause and resume the download

The download may look like it has started, but it will pause or fail in a few seconds. If that happens, hit the tiny retry button a few times, and it should start the download. If not, hit the download link again on the website.

Check your internet

Make sure your iPhone, iPad, or Mac is connected to a stable Wi-Fi, Cellular Data, or Ethernet connection and the internet is working properly.

Some useful tips

Turn off VPN if you’re using one.
Restart your Wi-Fi router.

Troubleshooting internet problems

How to fix cellular data not working on iPhone or iPad
What to do when your iPhone or iPad can’t connect to Wi-Fi
Internet not working on your Mac? Here are 16 solutions to fix it

Allow the website to download files

When you try to download a file from a website for the first time, it doesn’t start immediately. Instead, you will see an alert asking your permission to allow this site to download and save files locally or not. Make sure you allow that. If you choose to block the download, follow these steps to fix it:

On iPhone and iPad: Hit the download link again on the website and tap Allow or Download when asked. If you don’t see the Allow button, clear your browser data.

On Mac: Open Safari and click Safari > Settings from the top menu bar. Now, go to Websites > Downloads > click the drop-down menu next to the website name and choose Allow . While you’re here, also make sure it says ‘ Ask ‘ or ‘ Allow ‘ next to ‘ When visiting other websites .’

Allow websites to download files in Safari on Mac

Force Quit and reopen Safari

On iPhone and iPad: Swipe up from the bottom of the screen and hold or double-press the Home button to enter App Switcher. From here, drag the Safari app card all the way up to close it .

On Mac: Save your work in any other open Safari tabs. Next, click the Apple icon  and choose Force Quit . Here, select Safari and click Force Quit .

Now reopen Safari and try downloading the file again.

Use alternate download links

You may see more than one download link on a website. If one link fails to work, try the other one. Note: Sometimes, picking a different download quality (for a video, audio, or image) should do the trick.

Choose different download quality for image, video, and audio

Set Safari download location to anything other than iCloud Drive

If you have set Safari to download files to iCloud Drive, switch it to any other local storage folder using the steps below:

On iPhone or iPad: Settings > Safari > Downloads > On My iPhone or Other .

On Mac: Open Safari and click Safari > Settings from the top menu bar. From the General section, select Downloads , Desktop , or any local folder next to ‘ File download location .’

Stop Safari from automatically opening files after download

By default, Safari on Mac is set to open files after downloading them. That means if you download a ZIP file, Safari will automatically unzip it after downloading. In rare cases, this may cause the download to fail, not complete successfully, or not even start in the first place if the file you’re trying to download is incompatible. Therefore, it’s best to turn it off from Safari Settings > General > uncheck ‘ Open “safe” files after downloading .’

Restart your device

If Safari is unable to download files due to minor glitches, save your work and do a restart .

Make sure your device has sufficient free space

New file downloads will only succeed if your iPhone, iPad, or Mac has enough free space. So go to Settings, and check how much free storage you have. If it’s full, use these tutorials to free up space:

50+ tips to free space on your iPhone and iPad
30+ ways to free storage space on your Mac

Clear Safari history and cache

One of the most reliable solutions to fix Safari issues is clearing its history and website data .

On iPhone and iPad, you can do this from Settings > Safari > Clear History and Website Data .

On Mac, click History from the top menu bar and select Clear History .

Try disabling a recently installed Safari extension

If you could download files earlier but can’t after installing an extension, then that extension is likely the culprit. Remove it, restart your device, and now you should have no problem downloading files.

On iPhone and iPad: Head over to this guide on installing and removing Safari extensions .

On Mac: Go to Safari Settings > Extensions > select the extension and click Uninstall .

Update Safari

Safari updates are tied to system updates on iPhone and iPad. So, go to Settings app > General > Software Update and get the latest version of the operating system.

On Mac, you can update Safari from System Settings .

Update your Mac

If you’re on an older version of macOS, consider updating to the latest version, which should improve your computer’s overall working and stability.

On macOS Ventura and later, go to System Settings > General > Software Update . And on macOS Monterey and earlier, go to System Preferences > Software Update .

About iOS 17 Updates

iOS 17 brings big updates to Phone, Messages, and FaceTime that give you new ways to express yourself as you communicate. StandBy delivers a new full-screen experience with glanceable information designed to view from a distance when you turn iPhone on its side while charging. AirDrop makes it easier to share and connect with those around you and adds NameDrop for contact sharing. Enhancements to the keyboard make entering text faster and easier than ever before. iOS 17 also includes updates to Widgets, Safari, Music, AirPlay, and more.

For information on the security content of Apple software updates, please visit this website: https://support.apple.com/kb/HT201222

This update provides important bug fixes and security updates and is recommended for all users.

For information on the security content of Apple software updates, please visit this website:

https://support.apple.com/kb/HT201222

This update introduces new emoji, transcripts in Apple Podcasts and includes other features, bug fixes, and security updates for your iPhone.

New mushroom, phoenix, lime, broken chain, and shaking heads emoji are now available in the emoji keyboard

18 people and body emoji add the option to face them in either direction

Apple Podcasts

Transcripts let you follow an episode with text that highlights in sync with the audio in English, Spanish, French and German

Episode text can be read in full, searched for a word or phrase, tapped to play from a specific point and used with accessibility features such as Text Size, Increase Contrast, and VoiceOver

This update includes the following enhancements and bug fixes:

Music recognition lets you add songs you have identified to your Apple Music Playlists and Library, as well as Apple Music Classical

Siri has a new option to announce messages you receive in any supported language

Stolen Device Protection supports the option for increased security in all locations

Battery Health in Settings shows battery cycle count, manufacture date, and first use on iPhone 15 and iPhone 15 Pro models

Call Identification displays Apple-verified business name, logo, and department name when available

Business updates in Messages for Business provide trusted information for order status, flight notifications, fraud alerts or other transactions you opt into

Apple Cash virtual card numbers enable you to pay with Apple Cash at merchants that don’t yet accept Apple Pay by typing in your number from Wallet or using Safari AutoFill

Fixes an issue where contact pictures are blank in Find My

Fixes an issue for Dual SIM users where the phone number changes from primary to secondary and is visible to a group they have messaged

Some features may not be available for all regions or on all Apple devices. For information on the security content of Apple software updates, please visit this website:

This update provides bug fixes for your iPhone including:

Text may unexpectedly duplicate or overlap while typing

This update introduces additional security measures with Stolen Device Protection. This release also includes a new Unity wallpaper to honor Black history and culture in celebration of Black History Month, as well as other features, bug fixes, and security updates for your iPhone.

Stolen Device Protection

Stolen Device Protection increases security of iPhone and Apple ID by requiring Face ID or Touch ID with no passcode fallback to perform certain actions

Security Delay requires Face ID or Touch ID, an hour wait, and then an additional successful biometric authentication before sensitive operations like changing device passcode or Apple ID password can be performed

Lock Screen

New Unity wallpaper honors Black history and culture in celebration of Black History Month

Collaborate on playlists allows you to invite friends to join your playlist and everyone can add, reorder, and remove songs

Emoji reactions can be added to any track in a collaborative playlist

This update also includes the following improvements:

AirPlay hotel support lets you stream content directly to the TV in your room in select hotels

AppleCare & Warranty in Settings shows your coverage for all devices signed in with your Apple ID

Crash detection optimizations (all iPhone 14 and iPhone 15 models)

This update provides important bug fixes and is recommended for all users.

This update introduces Journal, an all-new way to reflect on life’s moments and preserve your memories. This release also includes Action button and Camera enhancements, as well as other features, bug fixes, and security updates for your iPhone.

Journal is a new app that lets you write about the small moments and big events in your life so you can practice gratitude and improve your wellbeing

Journaling suggestions make it easy to remember your experiences by intelligently grouping your outings, photos, workouts, and more into moments you can add to your journal

Filters let you quickly find bookmarked entries or show entries with attachments so you can revisit and reflect on key moments in your life

Scheduled notifications help you keep a consistent journaling practice by reminding you to write on the days and time you choose

Option to lock your journal using Touch ID or Face ID

iCloud sync keeps your journal entries safe and encrypted on iCloud

Action Button

Translate option for the Action button on iPhone 15 Pro and iPhone 15 Pro Max to quickly translate phrases or have a conversation with someone in another language

Spatial video lets you capture video on iPhone 15 Pro and iPhone 15 Pro Max so you can relive your memories in three dimensions on Apple Vision Pro

Improved Telephoto camera focusing speed when capturing small faraway objects on iPhone 15 Pro and iPhone 15 Pro Max

Catch-up arrow lets you easily jump to your first unread message in a conversation by tapping the arrow visible in the top-right corner

Add sticker option in the context menu lets you add a sticker directly to a bubble

Memoji updates include the ability to adjust the body shape of any Memoji

Contact Key Verification provides automatic alerts and Contact Verification Codes to help verify people facing extraordinary digital threats are messaging only with the people they intend

Precipitation amounts help you stay on top of rain and snow conditions for a given day over the next 10 days

New widgets let you choose from next-hour precipitation, daily forecast, sunrise and sunset times, and current conditions such as Air Quality, Feels Like, and wind speed

Wind map snapshot helps you quickly assess wind patterns and access the animated wind map overlay to prepare for forecasted wind conditions for the next 24 hours

Interactive moon calendar lets you easily visualize the phase of the moon on any day for the next month

This update also includes the following improvements and bug fixes:

Siri support for privately accessing and logging Health app data using your voice

AirDrop improvements including expanded contact sharing options and the ability to share boarding passes, movie tickets, and other eligible passes by bringing two iPhones together

Favorite Songs Playlist in Apple Music lets you quickly get back to the songs you mark as favorites

Use Listening History in Apple Music can be disabled in a Focus so music you listen to does not appear in Recently Played or influence your recommendations

A new Digital Clock Widget lets you quickly catch a glimpse of the time on your Home Screen and while in StandBy

Enhanced AutoFill identifies fields in PDFs and other forms enabling you to populate them with information such as names and addresses from your contacts

New keyboard layouts provide support for 8 Sámi languages

Sensitive Content Warning for stickers in Messages prevents you from being unexpectedly shown a sticker containing nudity

Qi2 charger support for all iPhone 13 models and iPhone 14 models

Fixes an issue that may prevent wireless charging in certain vehicles

This update provides important security fixes and is recommended for all users.

In rare circumstances, Apple Pay and other NFC features may become unavailable on iPhone 15 models after wireless charging in certain cars

Weather Lock Screen widget may not correctly display snow

This update introduces the ability for AirDrop transfers to continue over the internet when you step out of AirDrop range. This release also includes enhancements to StandBy and Apple Music, as well as other features, bug fixes, and security updates for your iPhone.

Content continues to transfer over the internet when you step out of AirDrop range

New options to control when the display turns off (iPhone 14 Pro, iPhone 14 Pro Max, iPhone 15 Pro, and iPhone 15 Pro Max)

Favorites expanded to include songs, albums, and playlists, and you can filter to display your favorites in the library

New cover art collection offers designs that change colors to reflect the music in your playlist

Song suggestions appear at the bottom of every playlist, making it easy to add music that matches the vibe of your playlist

Option to choose a specific album to use with Photo Shuffle on the Lock Screen

Home key support for Matter locks

Improved reliability of Screen Time settings syncing across devices

Fixes an issue that may cause the Significant Location privacy setting to reset when transferring an Apple Watch or pairing it for the first time

Resolves an issue where the names of incoming callers may not appear when you are on another call

Addresses an issue where custom and purchased ringtones may not appear as options for your text tone

Fixes an issue that may cause the keyboard to be less responsive

Fixes an issue that may cause display image persistence

https://support.apple.com/HT201222

This update provides important bug fixes, security updates, and addresses an issue that may cause iPhone to run warmer than expected.

This update provides important bug fixes, security updates, and fixes an issue that may prevent transferring data directly from another iPhone during setup.

Contact Posters let you customize how you appear on other people’s devices when you call them with a customized poster

Live Voicemail displays a live transcription as someone leaves a message and allows you to pick up the call

Stickers iMessage app brings all your stickers into one place including Live Stickers, Memoji, Animoji, emoji stickers, and your third party sticker packs

Live Stickers can be created by lifting the subject from photos or videos and stylizing them with effects like Shiny, Puffy, Comic, and Outline

Check In automatically notifies a family member or friend when you arrive at a destination safely and can share helpful information with them in case of a delay

Audio message transcription is available for audio messages you receive so you can read them in the moment and listen later

Search improvements help you find messages faster by allowing you to combine search filters such as people, keywords, and content types like photos or links to find exactly what you are looking for

Swipe to reply to a message inline by swiping to the right on any bubble

One-time verification code cleanup automatically deletes verification codes from the Messages app after using them with AutoFill in other apps

Leave a video or audio message to capture exactly what you want to say when someone does not pick up your FaceTime call

Enjoy FaceTime calls on Apple TV by using your iPhone as a camera (Apple TV 4K 2nd generation and later)

Reactions layer 3D effects like hearts, balloons, confetti, and more around you in video calls and can be triggered with gestures

Video effects allow you to adjust the intensity of Studio Lighting and Portrait mode

Full-screen experience with glanceable information like clocks, photos, and widgets designed to view from a distance when iPhone is on its side and charging in places such as your nightstand, kitchen counter, or desk

Clocks are available in a variety of styles including Digital, Analog, Solar, Float, and World Clock, with elements you can personalize like the accent color

Photos automatically shuffle through your best shots or showcase a specific album you choose

Widgets give you access to information at a distance and appear in Smart Stacks that deliver the right information at the right time

Night Mode lets clocks, photos, and widgets take on a red tone in low light

Preferred view per MagSafe charger remembers your preference for each place you charge with MagSafe, whether that’s a clock, photos, or widgets

Interactive widgets let you take actions, like mark a reminder as complete, directly from the widget by tapping it on the Home Screen, Lock Screen, or in StandBy

iPhone widgets on Mac enable you to add widgets from your iPhone to your Mac desktop

NameDrop lets you exchange contact information with someone new by bringing your iPhones close together

New way to initiate AirDrop allows you to share content or start a SharePlay session over AirDrop by bringing your iPhones close together

Improved autocorrect accuracy makes typing even easier by leveraging a powerful transformer-based language model (iPhone 12 and later)

Easier autocorrect editing temporarily underlines corrected words and lets you revert back to what you originally typed with just a tap

Enhanced sentence corrections can correct more types of grammatical mistakes when you finish sentences (iPhone 12 and later)

Inline predictive text shows single and multi-word predictions as you type that can be added by tapping space bar (iPhone 12 and later)

Safari and Passwords

Profiles keep your browsing separate for topics like work and personal, separating your history, cookies, extensions, Tab Groups, and favorites

Private Browsing enhancements include locking your private browsing windows when you’re not using them, blocking known trackers from loading, and removing identifying tracking from URLs

Password and passkey sharing lets you create a group of passwords to share with trusted contacts that stays up to date as members of the group make changes

One-time verification code AutoFill from Mail autofill in Safari so you can log in without leaving the browser

SharePlay makes it easy for everyone to control and play Apple Music in the car

Crossfade smoothly transitions between songs by fading out the currently playing song while fading in the next so the music never stops

Intelligent AirPlay device list makes finding the right AirPlay-compatible TV or speaker even easier by showing your devices in order of relevance, based on your preferences

Suggested AirPlay device connections are proactively shown to you as a notification to make it even more seamless to connect to your preferred AirPlay devices

Automatic AirPlay device connections are made between your iPhone and the most relevant AirPlay-compatible device so all you have to do is tap “Play” to begin enjoying your content

Adaptive Audio delivers a new listening mode that dynamically blends Active Noise Cancellation and Transparency to tailor the noise control experience based on the conditions of your environment (AirPods Pro (2nd generation) with firmware version 6A300 or later)

Personalized Volume adjusts the volume of your media in response to your environment and listening preferences over time (AirPods Pro (2nd generation) with firmware version 6A300 or later)

Conversation Awareness lowers your media volume and enhances the voices of the people in front of the user, all while reducing background noise (AirPods Pro (2nd generation) with firmware version 6A300 or later)

Press to mute and unmute your microphone by pressing the AirPods stem or the Digital Crown on AirPods Max when on a call (AirPods (3rd generation), AirPods Pro (1st and 2nd generation), or AirPods Max with firmware version 6A300 or later)

Offline Maps allow you to select an area you want to access, search, and explore rich information for places to download for use when your iPhone doesn’t have a Wi-Fi or cellular signal

EV routing improvements give you routes based on real-time EV charger availability for supported chargers

Option to say “Siri” in addition to “Hey Siri” for an even more natural way to make requests

Back-to-back requests can be issued without needing to reactivate Siri in between commands (iPhone 11 and later)

Visual Look Up

Expanded domains in Visual Look Up help you discover similar recipes from photos of food, Maps information from photos of storefronts, and the meaning of signs and symbols on things like laundry tags

Multiple or single subjects can be lifted from the background of photos and videos and placed into apps like Messages

Visual Look Up in Video helps you learn about objects that appear in paused video frames

Visual Look Up for subjects in photos enables you to look up information about objects you lift from photos directly from the callout bar

State of Mind reflection allows you to log your momentary emotion and daily mood, choose what factors are having the biggest impact on you, and describe your feelings

Interactive charts give you insights into your state of mind, how it has changed over time, and what factors may have influence such as exercise, sleep, and mindful minutes

Mental health assessments help you understand your current risk for depression and anxiety and if you might benefit from getting support

Screen Distance leverages the TrueDepth camera that powers Face ID to encourage you to increase the distance you view your device to reduce digital eye strain and can help reduce the risk of myopia in children

Sensitive Content Warnings can be enabled to prevent users from unexpectedly being shown images containing nudity in Messages, AirDrop, Contact Posters in the Phone app, and FaceTime messages

Expanded Communication Safety protections for children now detect videos containing nudity in addition to photos that children may receive or attempt to send in Messages, AirDrop, Contact Posters in the Phone app, FaceTime messages, and the system Photo picker

Improved sharing permissions give you even more control over what you share with apps, with an embedded photo picker and an add-only Calendar permission

Link tracking protection removes extra information from links shared in Messages, Mail, and Safari Private Browsing that some websites use in their URLs to track you across other websites, and links still work as expected

Accessibility

Assistive Access distills apps and experiences to their essential features in Phone and FaceTime, Messages, Camera, Photos, and Music, including large text, visual alternatives, and focused choices to lighten cognitive load

Live Speech lets you type what you want to say and have it be spoken out loud in phone calls, FaceTime calls, and for in-person conversations

Personal Voice enables users who are at risk of losing their voice to privately and securely create a voice that sounds like them on iPhone, and use it with Live Speech in phone and FaceTime calls

Point and Speak in Magnifier Detection Mode uses iPhone to read text out loud on physical objects with small text labels, such as keypads on doors and buttons on appliances

This release also includes other features and improvements:

Roadside Assistance via satellite lets you contact AAA to help you with vehicle issues when out of Wi-Fi or cellular range (iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max)

Pets in the People album in Photos surfaces individual pets in the album just like friends or family members

Photos Album widget lets you select a specific album from the Photos app to appear in the widget

Item sharing in Find My allows you to share an AirTag or Find My network accessory with up to five other people

Activity History in Home displays a recent history of events for door locks, garage doors, security systems, and contact sensors

Grid Forecast in Home shows when your electrical grid has cleaner energy sources available (Contiguous US only)

Grocery Lists in Reminders automatically group related items into sections as you add them

Inline PDFs and document scans in Notes are presented full-width, making them easy to view and mark them up

New Memoji stickers in Keyboard include Halo, Smirk, and Peekaboo

App Shortcuts in Spotlight Top Hit offer you app shortcuts to your next action when you search for an app

Redesigned Sharing tab in Fitness provides highlights of your friends’ activity like workout streaks and awards

Email or phone number sign-in lets you sign into your iPhone with any email address or phone number listed in your Apple ID account

New drawing tools in Freeform include a fountain pen, watercolor brush, ruler and more to create expressive boards

Crash Detection optimizations (iPhone 14, iPhone 14 Plus, iPhone 14 Pro, iPhone 14 Pro Max)

Some features may not be available for all regions or on all Apple devices. For more information, please visit this website:

https://www.apple.com/ios/ios-17

Some features may not be available for all regions or on all iPhone models. For information on the security content of Apple software updates, please visit this website:

a. Send us an email
b. Anonymous form
Buyer's Guide
Upcoming Products
Tips / Contact Us
Podcast Instagram Facebook Twitter Mastodon YouTube Notifications RSS Newsletter

Apple Releases Safari Technology Preview 191 With Bug Fixes and Performance Improvements

Apple today released a new update for Safari Technology Preview , the experimental browser Apple first introduced in March 2016. Apple designed the ‌Safari Technology Preview‌ to test features that may be introduced into future release versions of Safari.

The current ‌Safari Technology Preview‌ release is compatible with machines running macOS Ventura and macOS Sonoma , the latest version of macOS that Apple released in September 2023.

The ‌Safari Technology Preview‌ update is available through the Software Update mechanism in System Preferences or System Settings to anyone who has downloaded the browser . Full release notes for the update are available on the WebKit blog .

Apple's aim with ‌Safari Technology Preview‌ is to gather feedback from developers and users on its browser development process. ‌Safari Technology Preview‌ can run side-by-side with the existing Safari browser and while designed for developers, it does not require a developer account to download.

Get weekly top MacRumors stories in your inbox.