safari video border

Overlaying Video With Transparency While Wrangling Cross-Browser Support

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit!

As websites are becoming more and more dynamic when it comes to design, there is sometimes a need to incorporate complex, animated elements. There are many ways to do that from CSS transitions to 3D rendering on canvas, and animated SVG. But it is often easier to use a <video> since they can be rather efficient and, with them, just about anything visual is possible.

But what if you a need transparent background on that video, so that it could overlay and appear to interact with other content on the page? It’s possible, but can be tricky, especially cross-browser. Let’s explore that.

Here’s an example

To see how transparent video overlays work, I’ve prepared an example that I hope feels both fun and relatable. The idea is to integrate video with interactive content underneath so that the content behind the video changes as the slider is advancing. It is a slider advertising dog food with a real video of a dog on the overlay and I’m sure that realistic, cute dog would improve the conversion rate!

You can follow along with this article to recreate this demo by yourself. Part of what you’ll need to create a video like this is an “image sequence” (a bunch of alpha-transparent images we’ll stitch together into a video). I’m providing the images I used for the example.

Exploring possibilities

To achieve this effect, I started with a search for a ny kind of solution that would allow me to insert animated content with transparent background on the page.

The first thing that came up was a GIF. Even though the GIF format was introduced over 30 years ago, it is still widely used. Unfortunately, it has its limitations. While it works perfectly for simple and small animated graphics, it is not that great for colorful, long video footage, it has limited color space, and will grow a lot in size for complex videos.

The next option I’ve looked at was APNG , which for some reason, is not as popular as GIF but is much better. (I didn’t even know it existed, did you?) APNG works similarly to animated GIF files while supporting 24-bit images and 8-bit transparency. It is also backward-compatible with regular PNG. If APNG is not supported, the first frame is displayed. It is supported by popular browsers, but no support in Internet Explorer 11 (yup, some people still have to support that). While it seemed like the way to go for a moment, I was not satisfied with its file size and performance.

Fun fact: Apple adopted the APNG format as their preferred format for animated stickers in iOS 10 iMessage apps.

Loop through PNGs

Next, a crude, but working, idea came to mind: use a bunch of PNGs and loop through them with JavaScript to imitate the video. But it requires using a lot of data transfer (each video frame would be a separate image) and resources to animate (you could drain a user’s battery quickly or make their computer fan go crazy).

I quickly abandoned that idea, but it turned out to be useful later. I’ll get back to that at the end of the article.

WebM with alpha transparency

As all the formats for <img> failed here, I started looking into videos. I found an article about alpha transparency in Chrome video published in 2013, which announces Google Chrome support for WebM with an alpha channel. It even shows an example and shares tips on how to use it. I went through the article and it immediately felt like the way to go. I was even more convinced after converting my image sequence to WebM because, while GIF was weighing in at 5.8 MB, WebM with transparency,using the same frame rate and full colors was only 540 KB! That’s more than 10 times smaller while offering better performance and quality. Awesome!

The joy did not last long though. As soon as I opened the website on my iOS Phone I realized that I should’ve started with checking the browser compatibility. Unfortunately, Safari (iOS and macOS) doesn’t support transparency in WebM. While my video was working perfectly on Chrome, Firefox and Edge, Safari greeted me with an ugly black background.

The search continues…

A good Solution

Thankfully, I found a video from WWDC 2019 announcing HEVC video with Alpha support for Safari starting in iOS 13 and macOS Catalina. It seemed to provide the same functionality as WebM but with support on Apple devices. So I decided to use the hybrid solution: HEVC for Safari and WebM for other browsers.

It seems like the perfect solution. But now we have two tasks:

• Create an HEVC with alpha-transparency
• Detect for Safari (and the version) to serve the correct format

Creating a transparent video

We will start with the easy part: creating a WebM file. If you want to create, convert, or even edit video files, FFmpeg is your friend. It is an extremely powerful open source multimedia framework, and if you have anything to do with multimedia files, I’d recommend starting there because it’s capable of so many things . I can say that FFmpeg has helped me reduce video file sizes over 10 times without any visible image quality degradation. But let’s get back to transparency.

In my experience, if you need to include animated elements into website layout, you get them as a set of video frames in PNG. Even while working on my example project, a tool that removes background from videos generated a set of images for me. So I will continue here assuming we’re building the video from a set of images (remember, you can download our set ), but even if you’ve got a video file instead, the process will look similar (adjust FFmpeg options to your needs).

We are now ready to create a video. Using the command line, we’ll navigate to the folder that contains the PNG files and run the following command:

You can adjust the arguments to fit your needs:

• framerate : how much images will be used for 1s of the output video
• -i unscreen-%3d.png : input file name and format. My files have numbers from 001 to 150 so i used %3d as a mask to select all files with three digits in the name.
• -c:v : specifies the codec to use. I want the video to be encoded with VP9, which is supported by most web browsers .
• -pix_fmt : specifies pixel format to be used. In our cas, it should support an alpha channel. You can see all supported formats if you run ffmpeg --pix_fmts .
• output.webm : provides the desired output file name as a last argument

There are a lot more options available , but I won’t dive into details as it would take probably more than one article to go through them. Those provided in the example command work fine for our use case.

After the process is finished, we should see a new output.webm file, and if you open it in a supported browser, you’ll see a video. Easy, right?

Creating HEVC Alpha

Since we have a WebP file ready, it’s time to move to the second format we will be using: HEVC with alpha transparency . Unfortunately, at the time of writing, FFmpeg doesn’t support HEVC, so we have to use another tool. As far as I know, the only way to create HEVC with alpha is to use the Finder or Compressor on Mac. If you have a PC, you’ll probably have to ask someone with Mac to do it for you. The Compressor app is only provided with Final Cut Pro, so I won’t be using it, although it may be worth considering if you need custom settings.

Since macOS Catalina, the Finder has a built in Encode Media tool to convert videos. It is simple (and free), so it feeds our needs.

The Finder expects a video file as an input, so first, we have to convert the image sequence to ProRes 4444 . This is an important step, as the Encode Media tool won’t accept just any video — it will fail unless you provide the format it accepts. It gave me a headache or two until I found out the correct encoding for the input file.

We can create input video using FFmpeg. As we did when creating WebM, we just have to run FFmpeg with the proper arguments:

From this point on, a Mac is needed. But the process is simple and does not involve typing anything in terminal, so even if you ask a non-techy friend with a Mac to do it for you, I’m sure they can manage.

Having ProRes4444 video ready, you can navigate to the containing folder in Finder, right-click on it, and in the context menu, select Encode Selected Video Files .

A window will appear. Select the desired HEVC quality (there are two to choose from), and check the option to Preserve Transparency. Then click the “Continue” button.

After a moment you should see a new file, which is encoded in HEVC with alpha. It’s done! Opening this file in Safari confirm that the transparency works.

Last but not least, it’s time to use videos on the website!

Serving transparent videos for all browsers

We can use <video> element to serve videos. If the browser supports the given format in the src attribute, it will just work. But as I’ve mentioned, we need to serve HEVC for Safari and WebM for other browsers.

There is one more thing to take care of: some browsers support WebM or HEVC itself but without transparency . Those browsers will play the video but with a black background instead of an alpha channel. For example, Safari 12 will play HEVC without transparency. That’s unacceptable for us.

Normally, I’d use the <source /> element to provide the video along with multiple formats as fallbacks, and the browser would pick the one it supports. However, since we want to show HEVC only on specific Safari versions, we will have to set the video src attribute instead using JavaScript.

HEVC with transparency is supported in iOS 13 and Mac Safari 13, so let’s start by detecting those. The recommended way to adjust website features based on support is by detecting the existence of an API rather than looking at the User Agent, but I didn’t find any simple way to detect if the browser supports transparency in video format. Instead, I came up with my own solution. It’s not pretty, but it does the job.

This targets Safari 13 and above by looking at navigator.mediaCapabilities , which is not supported in older versions, as well as looking that the browser is Safari at all. If the function returns true , then I’m good to go with HEVC alpha. For any other case, I’ll load WebM video.

Here’s an example of how this comes together in HTML:

If you’re curious about those loop muted autoplay playsinline arguments on video element, those are about replicating a GIF-like experience:

• Without muted , the video will not play without user interaction.
• With playsinline , on iOS, the video plays right where it is in the layout instead of opening up in fullscreen.
• With loop , the video repeats over and over.
• With autoplay , it will start playing the video automatically on page load (as long as we also have muted in place).

That’s it! We have a lightweight, performant and high-quality solution for transparent videos, that works on most modern browsers (at least the last two recent versions of Chrome, Firefox, Safari and Edge). We can add some basic HTML and CSS to integrate static content with it and make it a little bit more real-life, or just use the same idea that’s in my demo. That wasn’t too bad, was it?

Hey, but what about IE 11? My whole company is using it!

In general, I’d recommend limiting a feature like this to modern browsers and hiding the video in IE. The video is probably not a critical element of the website. Although, I used to work on a commercial project where IE 11 support was a must and I was forced to figure something out to show the transparent video there. In the end, I ended up cycling through PNG images with JavaScript. I reduced the amount of frames and switched between them using a timer. Sure, the performance was awful, but it worked. The video was quite important to the whole design so we intentionally decided to sacrifice performance on IE 11 to provide the full experience.

I hope that I’ve saved you some time researching the idea of alpha-transparent video and that now you’re be able to incorporate animated elements like this on your website. I bet you’ll need it someday!

Do you have a different idea of how to use transparent video? Or maybe some experience with that already? Let me know in the comments.

Maybe just overlay a canvas element on top of the video and write to it as the transparency layer?

Great article! I’ve been looking at this problem for years and at last it seems that the browsers are doing the right thing. Thanks for sharing!

Thank you for this.

Unfortunately checking for Safari version alone is not enough. On desktop computers HEVC decoding is only supported from Mac OS 10.15 (Catalina).

On versions prior to that the video will render with a black background. Any pointers on how to refine the feature detection would be appreciated.

This is exactly the issue I’m facing. Would love a solution that could play another version for MacOS <10.14, perhaps a gif?

Great guide, thank you.

Thanks for this excellent tutorial! I am new to ffmpeg, and I am getting this error:

Incompatible pixel format ‘yuva420p’ for codec ‘libvpx-vp9’, auto-selecting format ‘yuv420p’

I looked around a bit and someone suggested “changing native decoder to libvpx decoder which provides alpha”, but unfortunately did not provide instructions to do that. Have you run into this and do you have any advice?

Thanks in advance, very grateful for this post!

This works perfectly on Mac, Windows and on Android browsers, but the videos don’t display on the iPhone. Any idea how to resolve this? The player already has ‘playsinline’ in it.

I know that perhaps I am late but anyway: you should also add ‘preload=metadata’ attribute and add that meta data in the end of your ‘src’ value. That value is a timestamp of video you want to show. Example below:

GREAT !!! been looking for this. thanks. can you help ? how do I float my video of a News anchor on top of my html (a spinning globe js). I need to have the User control and spin the globe. Did you just explain all that here? what if i want my video to be a Live stream?

That article is truly a gem! Thank you so much! Btw, worth mentioning that all mobile browsers on iOS should be treated as Safari. For example, Chrome on iOS does not support .webm container, neither do the others, but Chrome and other browsers on iOS does support .mov container!

In previous comment under “…all mobile browsers on iOS should be treated as Safari” I meant it in context of transparent video problem.

Great tut, but is there a way to play opaque.mp4 video for Safari below version 13 and for other browsers transparent .webm as it is in the script? Because the script only calls .webm if the Safari is not 13+, but Safari supports webm only from version 15+. Thanks!

Apple Vision Pro User Guide

• Apple Vision Pro and visionOS overview
• Get started with Apple Vision Pro
• Stay connected and share memories
• Use Apple Vision Pro at work
• New entertainment experiences
• Adjust the fit
• Adjust display alignment
• Use ZEISS Optical Inserts
• Attach or remove the Light Seal or head band
• Clean your Apple Vision Pro
• Handle and store your Apple Vision Pro
• Connect the battery
• Charge the battery
• Prepare your space
• Safely use your Apple Vision Pro
• Important safety information
• Important handling information
• Turn on and set up
• Wake and unlock
• Redo eye and hand setup
• Basic gestures and controls
• Adjust volume
• Take a capture or recording of your view
• Find settings
• Connect Apple Vision Pro to the internet
• Sign in to your Apple Account on Apple Vision Pro
• Use iCloud on Apple Vision Pro
• Set a passcode and use Optic ID
• Capture your Persona (beta)
• About EyeSight
• Connect Bluetooth accessories
• Use AirDrop
• Set up Apple Pay
• Use Apple Pay in apps and Safari
• Set up and use Apple Cash
• Manage Apple Pay cards and activity
• Use Family Sharing
• Use Home View
• Open, rearrange, and delete apps
• Open Control Center
• See your notifications
• Learn the meaning of status icons
• Recenter your view
• Move, resize, and close app windows
• Use Environments
• Adjust immersion
• Use Mac Virtual Display
• View Mirroring and AirPlay Receiver
• Change notification settings and device sounds
• Set the date, time, language, and region
• Change your device name
• Change the appearance of text and windows
• See people around you while immersed
• See your Magic keyboard while immersed
• Use Apple Vision Pro on an airplane or a train
• Set up a Focus
• Turn a Focus on or off
• Refresh apps in the background
• Set content restrictions in Screen Time
• Let others use your Apple Vision Pro
• Subscribe to Apple Arcade
• Play with friends in Game Center
• Manage purchases, subscriptions, settings, and restrictions
• Install and manage fonts
• Encounter Dinosaurs
• Make or receive a FaceTime call
• Leave or end a FaceTime call
• During a call
• Use spatial Persona
• Use SharePlay in FaceTime calls
• Hand off a FaceTime call to another device
• Block unwanted callers
• View, modify, and organize files and folders
• Send and share files and folders in iCloud Drive
• Set up iCloud Drive
• Connect external servers
• Create and manage Freeform boards
• Shapes and text boxes
• Photos, videos, files, and links
• Accessible descriptions
• Position items on a board
• Share and collaborate
• Get started with Keynote
• Create and manage presentations
• Add, skip, or delete slides
• Change the theme, layout, or background
• Change the appearance of text
• Align and space text
• Format lists
• Use 3D objects
• Show your Persona during a presentation
• Add an image, video, or image gallery
• Add and edit a shape
• Add and edit drawings
• Align objects
• Layer, group, lock, and resize objects
• Change how an object looks
• Add linked objects to make your presentation interactive
• Add or delete a table
• Change the look of a table
• Add and edit cell content
• Highlight cells conditionally
• Add or modify a chart
• Change the look of data series
• Add a legend, gridlines, and other markings
• Change the look of chart text and labels
• Add animations and transitions
• Rehearse on your Apple Vision Pro
• Present on your Apple Vision Pro
• Play a slideshow with multiple presenters
• Add and view presenter notes
• Check spelling, replace words, and add comments
• Send or share a presentation
• Add and remove email accounts
• Set up a custom email domain
• Check your email
• Unsend email with Undo Send
• Reply to and forward emails
• Save an email draft
• Add email attachments
• Download email attachments
• Annotate email attachments
• Set email notifications
• Search for email
• Organize email in mailboxes
• Flag or block emails
• Filter emails
• Use Hide My Email
• Use Mail Privacy Protection
• Change email settings
• Delete and recover emails
• Print emails
• Set up Messages
• Send and receive messages
• Add photos, stickers, and more
• Unsend, edit, and delete messages
• Keep track of messages and conversations
• Collaborate in Messages
• Send and request money with Apple Cash
• Change notifications
• Block messages
• Mindfulness
• Control playback
• Subscribe to Apple Music
• Listen to lossless music
• Listen to Dolby Atmos music
• Apple Music Sing
• Find new music
• Add music and listen offline
• Get personalized recommendations
• Listen to radio
• Search for music
• Create and collaborate on playlists
• Use Siri to play music
• Change the way music sounds
• Create and format notes
• Work with PDFs
• Pin, organize, and search notes
• Add accounts and change settings
• Create, view, and edit passwords
• Share passwords or passkeys
• Change weak or compromised passwords
• Automatically fill in verification codes
• View photos and videos
• Create a spatial photo from a 2D photo
• Create albums
• Filter photos and videos in albums
• Trim a video
• Duplicate or copy photos and videos
• Delete or hide photos and videos
• Customize the Photos app
• Search in Photos
• Share photos and videos
• Use iCloud Photos
• Browse the web
• Watch web videos in an Environment and view panoramas
• Customize your Safari settings
• Open and close tabs
• Bookmark favorite webpages
• Find links shared with you
• Annotate and save a webpage as a PDF
• Automatically fill in forms
• Get extensions
• Browse the web privately
• Use passkeys in Safari
• Find shows, movies, and more
• Play shows and movies
• Watch Apple Immersive Video and 3D movies
• Watch movies and TV in an Environment
• Subscribe to Apple TV+, MLS Season Pass, and Apple TV channels
• Watch sports
• Buy content and manage your library
• Change settings
• Voice Memos
• Set up and activate Siri
• Find out what Siri can do
• Tell Siri about yourself
• About Siri Suggestions
• Change Siri settings
• Get started with accessibility features
• Turn on features with the Accessibility Shortcut
• Change Siri accessibility features
• Turn on and practice VoiceOver
• Change your VoiceOver settings
• Learn VoiceOver gestures
• Control VoiceOver using the rotor
• Use the virtual keyboard
• Use VoiceOver with a Magic Keyboard
• Use a braille display
• Use VoiceOver for images and videos
• Adjust text display settings
• Colors and contrast
• Reduce motion
• Hear what’s in your view or typed
• Hear audio descriptions
• Use AssistiveTouch
• Perform actions with sounds
• Perform actions with your eyes
• Perform actions with your voice
• Set up Switch Control
• Use Switch Control
• Adjust settings for the Digital Crown
• Use a pointer to navigate
• Control your device with an external keyboard
• Adjust AirPods settings
• Use hearing devices
• Use sound recognition
• Play background sounds
• Adjust audio settings
• Subtitles and captions
• Live captions
• Use Vocal Shortcuts
• Use Guided Access
• Use built-in privacy and security protections
• Keep your Apple Account secure
• Sign in with passkeys
• Sign in with Apple
• Automatically fill in strong passwords
• Make your passkeys and passwords available on all your devices
• Sign in with fewer CAPTCHA challenges on Apple Vision Pro
• Manage two-factor authentication for your Apple Account
• Control app tracking permissions
• Control the location information you share
• Control access to information in apps
• Control how Apple delivers advertising to you
• Control access to hardware features
• Create and manage Hide My Email addresses
• Protect your web browsing with iCloud Private Relay
• Use a private network address
• Use Contact Key Verification on Apple Vision Pro
• Turn Apple Vision Pro on or off
• Force restart
• Update visionOS
• Back up and restore
• Return settings to their defaults
• Restore purchased and deleted items
• Sell or give away
• Erase Apple Vision Pro
• Get information about your Apple Vision Pro
• Find more resources for software and service
• FCC compliance statement
• ISED Canada compliance statement
• Class 1 Laser information
• Apple and the environment
• Disposal and recycling information
• Unauthorized modification of visionOS

Watch web videos in an Environment and view panoramas in Safari on Apple Vision Pro

On some websites in Safari, you can watch embedded videos in an Environment, with a glow from the window to give you a cinematic experience. Other windows are hidden, so you can focus on what you’re watching.

You can also view panoramas on some websites in Safari, and the photos wrap around you just like in the Photos app.

Watch videos in an Environment

Open a supported website with a video (such as Youtube.com), then enter full screen.

Other apps are temporarily hidden while you watch, and the window moves directly into view. To use a different Environment, see Use Environments on Apple Vision Pro .

View panoramas

Open a website with a panorama, then tap the panorama to open it outside the Safari window.

On some websites, you may need to pinch and drag the panorama out of Safari.

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.

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 .

macOS Sequoia is available today, bringing iPhone Mirroring, Apple Intelligence, and more to Mac

iPhone Mirroring

More Surfing Power in Safari

Easier Window Tiling

A New Passwords App

Video Conferencing Updates

Coming Soon: Apple Intelligence

Additional Features

Text of this article

September 16, 2024

macOS Sequoia , the latest version of the world’s most advanced desktop operating system, is available today as a free software update for Mac. macOS Sequoia brings exciting new features, including iPhone Mirroring, which expands Continuity by enabling access to and control of iPhone directly from macOS; big updates to Safari; a new Passwords app; and more. Starting next month, macOS Sequoia will introduce Apple Intelligence, 1 the personal intelligence system that combines the power of generative models with personal context to deliver intelligence that is incredibly useful and relevant while protecting users’ privacy and security.

Here’s a look at the top features Mac users can experience when they update to macOS Sequoia.

Working across iPhone and Mac gets even easier with the newest Continuity feature in macOS Sequoia — iPhone Mirroring. Users can now access and engage with their iPhone right from their Mac. Custom wallpaper and app icons appear just like on iPhone. With iPhone Mirroring, users can also swipe between pages on the Home Screen; launch and browse favorite apps; and review and respond to iPhone notifications directly from their Mac. And iPhone remains locked the whole time, so nobody else can access or see what the user is doing. It also works great with StandBy, so users can continue to get information at a glance on their iPhone as they use iPhone Mirroring.

Safari is the world’s fastest browser, 2 and it’s even easier to discover new information on the web with the new Highlights feature. Powered by machine learning, Highlights automatically surfaces directions for a location, summaries of articles, or quick links to learn more about people, music, movies, and TV shows. A redesigned Reader allows users to read articles more quickly with a streamlined view, a summary, and a table of contents, and a new Viewer helps users put videos front and center while still giving them full access to system playback controls. With Distraction Control, users can hide items on a webpage that they may find disruptive to their browsing.

New ways to arrange windows let users stay organized with the layout that works best for them. By simply dragging a window to the edge of the screen, macOS Sequoia automatically suggests a tiled position on the user’s desktop. Users can release a window right into place, quickly arrange tiles side by side, or place them in corners to keep even more apps in view. And new keyboard and menu shortcuts help organize tiles even faster.

An all-new Passwords app makes it even easier to access passwords, passkeys, Wi-Fi passwords, and other credentials all in one convenient place on Mac. The Passwords app is backed by incredibly secure end-to-end encryption. It works great with Safari, and seamlessly syncs between all of a user’s Apple devices and Windows with the iCloud for Windows app.

During video calls in FaceTime or third-party apps like Webex, users can apply beautiful built-in backgrounds, including a variety of color gradients or shots of the scenery in and around locations like Apple Park in Cupertino, California. They can even upload their own photos to use as a background, And with Apple’s industry-leading segmentation, users will look their best on every call. With presenter preview, users can now see what they’re about to share before sharing it with apps like FaceTime and Zoom.

Apple Intelligence will transform what users can do with Mac, delivering intelligence that is incredibly useful and relevant to them, while protecting their privacy and keeping them in control of their data. Apple Intelligence will be available on Macs with an M-series chip, harnessing the power of Apple silicon and the Neural Engine to understand and create language and images; take action across apps; and draw from personal context to simplify and accelerate everyday tasks. Writing Tools help rewrite, proofread, and summarize text. Siri becomes more natural, flexible, and deeply integrated into the system experience, and with richer language-understanding capabilities, Siri can follow along when users stumble over their words. Siri can also maintain context from one request to the next. Mac users can type to Siri and fluidly switch between text and voice to accelerate everyday tasks. In addition, with Siri’s extensive product knowledge, users can now get answers to thousands of questions about the features and settings on Mac. With many of the Apple Intelligence models running entirely on device, as well as the introduction of Private Cloud Compute — which extends the privacy and security of Apple devices into the cloud to unlock even more intelligence — Apple Intelligence introduces an extraordinary step forward for privacy in artificial intelligence.

In macOS Sequoia, there are many more unique and useful features added to users’ favorite Mac apps.

In Messages, users can now schedule messages to send later. Text messages can also come to life with unique text effects that visually amplify words or emoji with animations like “explode,” “ripple,” and “nod,” and users can even tap back with any emoji or sticker they want.

In the Notes app, users can now record audio and receive a live transcription, making it incredibly easy to capture every detail of a lecture, meeting, or conversation, and Apple Intelligence will automatically generate a summary. Math Notes also comes to macOS Sequoia, enabling users to instantly solve an expression or math problem simply by typing it into the Notes app on Mac.

In the Maps app, outdoor enthusiasts gain access to stunning topographic maps and a selection of thousands of hikes available across U.S. national parks. Additionally, users can now easily create custom walking and hiking routes with just a few clicks.

For a comprehensive list of everything that’s new in macOS Sequoia, visit apple.com/macos/macos-sequoia .

Availability

macOS Sequoia is a free software update that is available starting today. For more information, visit apple.com/macos/macos-sequoia . Some features may not be available in all regions or in all languages.

• Apple Intelligence will be available with iOS 18, iPadOS 18, and macOS Sequoia 15.1 on iPhone 16, iPhone 16 Plus, iPhone 16 Pro, iPhone 16 Pro Max, iPhone 15 Pro, iPhone 15 Pro Max, and iPad and Mac with M1 and later, with device and Siri language set to U.S. English. Additional languages and platforms are coming over the course of the next year. Later this year, Apple Intelligence will add support for localized English in Australia, Canada, New Zealand, South Africa, and the U.K. In the coming year, Apple Intelligence will expand to more languages, like Chinese, French, Japanese, and Spanish.
• Testing was conducted by Apple in August 2024. See apple.com/safari for more information.

Press Contacts

Michelle Del Rio

[email protected]

Starlayne Meza

[email protected]

Apple Media Helpline

[email protected]

Images in this article

HTML Video element, not working after iosSafari15 update

after update(ios15.0) of my iPhone12, video element on my website, what im using as video background of website has stopped working. all others browsers is working properly.

all i can see is white blank background instead of background video. it looks like video cannot be loaded or played.

can you recommend me some tips to fix that issue? thank you

Same issue here. Any news?

Same here, seems like iOS 15 has broken the <video> element, except for me, it is also broken on Chrome on iOS.

Also some extra info, if you apply a background: white; style (or any non-transparent colour, or image) to the <video> element, it will then be able to render the first frame of the video instead of showing nothing. In some cases it will continue to render the following frames only when the user is dragging their finger on the video element. As soon as the page stops moving, the video will freeze again.

Definitely seems like an iOS 15 bug to me.

I have had a similar problem. I suggest you check your CSS, in my case, passing a video from fixed to absolute position has corrected the problem.

I'm also noticing this issue. Applying the background color can get the first frame of the video to show, but I can't influence the playing otherwise.

I am noticing the same behavior on Mac OS (desktop) Safari 15. I can get the first frame of the video to show up if a background color is set on the element.

The video will not autoplay (despite having the correct attributes), but I did notice an unusual behavior: I can "scrub" the video by resizing the viewport (either resizing the window or resizing the web inspector drawer).

Same Problem here. Seems other People have the same Problem:

https://stackoverflow.com/questions/69554317/safari-15-0-video-element-position-fixed-not-working-on-page-load

https://stackoverflow.com/questions/69264516/safari-ios-15-video-issue

The only fixes i found so far:

• add Position fixed via JS after Page load
• reassign the src of the video tag via JS after Page load

Both solutions feel very dirty/hacky.

Any News? Apple that can't be. All other modern Browsers don't have that problem...

Same issue here are well, but am curious if this bug is only on videos with transparent backgrounds? I have a few videos on my site, but only getting this bug on the one with the transparent background. Considering the above hack is to add a background color to the video element, I wonder if theres any relation there.

I have the same issue. I can't get the tag to work on Safari Desktop, despite having no issues with every other browser. Workarounds here shouldn't be necessary. Apple need to provide a solution. The Apple documentation says that the video html tags work in Safari.

Also experiencing this issue. Any word on when/if it will be fixed?

Same issue here.

The <video> poster attribute is not showing since iOS 15.

Other 'hacks' mentioned here with CSS are no good for HLS video sources to 'display the first frame' before requesting playback.

Wow Apple keeps disappointing with this browser - so many bugs constantly reported.

I have found a work-around that works on my Macbook (haven't tested mobile Safari). With the same framerate as the video I update video.style.willChange alternating between "" and "transform". It's possibly a performance killer, so make sure you stop this with an intersection observer etc.

Same issue...tried all of the suggested workarounds and nothing working. For me, this seems to only be an issue with Safari and Chrome running on iOS 15

No solution till yet, I'm also facing the same issue.

I am developing a webpage and simple video tag makes the pages so laggy on ios browser (chrome/safari)...

Same issue.

We’re sorry, but Freepik doesn’t work properly without JavaScript enabled. FAQ Contact

AI-generated image

From your imagination to a tangible image in just a few words

From social media posts or prints to any other layouts, and everything in between

See your designs in action on apparel, packaging or prints

• Notifications
• Go back Remove
• No notifications to show yet You’ll see useful information here soon. Stay tuned!
• Downloads 0/60 What is this?
• My collections
• My subscription
• Grass frame
• Bamboo border
• Jungle theme
• Tree border
• Jungle circle
• Nature frame
• Transparent leaf border
• Green frame
• Green plant border

Safari Border Images

• Add to collection
• Save to Pinterest

• animal drawing

• baby shower

• jungle safari

• Cartoon jungle
• jungle tree

• Animals cartoon

• safari theme
• animal background
• banner frame

• Cartoon drawing
• Cartoon frame

• Cartoon giraffe

• Background cartoon
• Cartoon scenery

• cute elephant

• frame template
• frame white

• baby elephant

• bear clipart

• animal illustration

• animal clipart

• banner border

• blank template
• background card