safari rgba not working

• Blog Entries
• Developer Connection

CSS bug using rgb/rgba for Safari 10/11 in some properties

By TSP November 28, 2020 in Developer Connection

Recommended Posts

@Rikki   @Ehren

Safari 10 and 11 apparently have an issue with the use of rgb() / rgba() in combination with --css-variables within certain CSS properties like border and box-shadow. I found one specific bug in your default theme that you can fix, other than that I just want to make you aware of this, as I had to spend quite a lot of time debugging this myself. 

After an upgrade from 4.4 I got a number of complaints about how there was now a grey circle covering the reaction button and the number of likes. People reported having the issue on desktop, mobile and tablet. Initially I was unable to reproduce and started to ask for more details. One of the users provided me with a user agent string which led me to reproduce the issue and discovering another one.

This image displays two of the issues I found in our theme:

This image displays how it looked in Safari 9(!), Safari 12+ and other browsers:

How to reproduce issue 1 on a community:  

You need to be logged in with a member account that's able to give reactions, and: 

The reaction setup:  In my case only the standard like-reaction is enabled, all other reactions disabled. We use the upvote-image for the like-reaction. Reaction display is set to Overall reaction value. Reproduced with: Browserstack -> Mac -> High Sierra -> Safari 11.1 (or other environments with Safari 10 or 11)

Please note: only issue 1 can be reproduced in the default theme, but I'm also mentioning my second issue just to provide an additional example. 

Cause/solution for Issue 1 / Bug in default theme) Grey circle covering like button and reaction value

This is caused by the following CSS rule in applications/core/dev/css/global/framework/engagement.css

More specifically the issue is with the box-shadow line at the bottom. Unless I'm missing something, this rule is the equivalent of:

box-shadow: inset 0 0 0 35px transparent;

Changing the value of box-shadow to "inset 0 0 0 35px transparent" at least fixes the issue. But I guess this might affect the animation styles you have further below in the same stylesheet. I don't know what a better solution would be, but I at least think you should make sure that the reaction button and reaction value are available in Safari 10 and 11, which they are not currently. 

Cause/solution for Issue 2) Black color instead of lighter border color around posts

So the second issue was caused by custom CSS from me, but I'm including it since it highlights the rgb/rgba problem with another CSS property as well. 

My CSS-rule was: 

The solution here was to instead use border-style and border-width and then add:

border-color: rgb(var(--theme-ehm_grey2));

So rgb() + --css-var worked within the value of the border-color property, but not within the border property.

Note that if you do not  use a variable within rgb for the border-property, then it would also use the correct color: border: 1px solid rgb(235,235,235);   Meaning it's the combination of rgb/rgba-function and --css-variables that is causing the issue. Not the rgb-function on it's own

In summary / other findings / questions:

1) Safari 10 and 11 apparently have an issue with the use of rgb() / rgba() in combination with --css-variables within certain properties. In most cases it probably doesn't cause too much trouble, but I think you should at least fix the reaction styling issue and also just be aware of this issue. 

2) I personally found it very weird this issue is not in Safari 9. It seems it worked as it should Safari 9, then they broke it for Safari 10&11, before it was fixed again for Safari 12 and newer. Unless you have some kind of compatibility CSS rules or javascript that kicks in for Safari 9 but not 10/11?

3) I did a quick search on google about this and found a note about this from 2018 in another software project:  https://github.com/ionic-team/ionic-framework/issues/16123

They gave an alternate way to debug and solve this (which I haven't tested myself): 

Quote Describe the Bug Just a heads up in case anyone was wondering why Safari renders CSS in many places vastly different to Chrome: This does not work: border: 19px solid rgba(var(--ion-color-primary-rgb), 0.9); This however does: --workaround-border-color: 19px solid rgba(var(--ion-color-primary-rgb), 0.9); border: var(--workaround-border-color); Bottom line, currently Safari (Mac and iOS/cordova) doesn't render *-rgb values properly for border box-shadow and probably more!

• Martin A. and sofos

Link to comment

Share on other sites, recently browsing    0 members.

• No registered users viewing this page.

Upcoming Events

• Client Area
• Privacy Policy
• Existing client? Sign in
• All Activity
• Providers Directory
• Leaderboard
• Marketplace
• Create New...

CSS3 Colors

Method of describing colors using Hue, Saturation and Lightness (hsl()) rather than just RGB, as well as allowing alpha-transparency with rgba() and hsla().

Transparent Gradient over Background Img not working - Safari 12.0

I’ve got a background image set as a linear gradient on top of an image. It displays properly in Chrome, but in Safari 12.0 it doesn’t show up. I inspected the element and get an error thrown that says ‘unsupported property value’. I can’t seem to figure out why. Any ideas you might have would be helpful. I’ll link the pen for the project below.

I’m not sure if this is the problem, but I noticed that in your CSS for your #hero-area , this is what you wrote:

background-image: linear-gradient(rgb(51, 51, 51, 0.6), rgba(51, 51, 51, 0.6)),

There’s a missing ‘a’ in the first rgb. It might affect something, try to include it and see if it works. Linear-gradient has partial support on Safari 12 according to https://caniuse.com/ (you can use this to check browser support), so that might also be an issue.

UGH, I sat there for a good half hour without seeing that typo. That took care of it. Thank you!

[Fix] Background image CSS not working fixes

How to fix background images not appearing in CSS. A common issue is images not loading when we are messing around with relative paths. The post will go over various fixes for that!

🔔 Table of contents

Introduction.

One of the frustrating with setting background images in CSS is that the image does not turn up.

So many times something this simple should of been pretty straight forward even when the HTML and CSS seems like it is correct.

In this post, we will go over several ways (or a checklist) on how to fix this type of issue.

How do we use background image?

As the name suggests, the background-image property, sets a background image (or multiple images) for an element.

When you have multiple images, you will need to consider the stacking order. The first image defined will be the top image.

Fix 1 - check that the image path is correct

The most likely issue with your background image not working is that the image path that was provided is not correct. Below are a few tips you can go through to check for issues:

👉 Check your relative path

Commonly, the background image is not appearing is because the relative path provided did not resolve.

• / - This means the root directory
• ../ - This means going up on directory
• ./ - This means the current directory
• ../../ - This means going up two directories

Relative paths depend on the location of the CSS styling. As an example, lets say we include CSS in our HTML file (index.html) like so:

We also have a bunch of pictures in the following main folder:

• pictureA.png
• images/pictureY.png

To get pictureA.png , we can use the following command. Notice that since pictureA.png is in the same directory, we can just specify the filename or ./pictureA.png

To get pictureY.png , since it is located in the images folder, we can use the following command.

As another more complex example, lets say we have the following folder structure with the CSS file as an external file that is referenced by the HTML index.html file.

So our HTML looks something like this:

And the folder structure looks like the following:

• styles/main.css
• styles/sample-images/pictureX.png

Now, since our main.css is in the styles folder, if we want to load pictureA.png then we need to move up one directory level using ../ . The code is as follows:

Additionally, in this case, since pictureA.png is also in the root folder, the following code will work using / .

If we want to acess pictureX.png , then its a matter of going down one level to the sample-images folder.

If we need to load pictureY.png , then we will need to go up one directory and then down to the images folder like so:

👉 Using quotes

Earlier versions of CSS and browser implementations, there has been confusion on whether we need quotes or no quotes. According to the official CSS spec, quotes are optional ( https://www.w3.org/TR/CSS2/syndata.html#value-def-uri )

So the following code will be the same.

One exception is that if your image file name contains special characters. In this case, url needs to be URI-escaped (where “(” = %28, “)” = %29, etc.)

👉 Check your image file name and extension

One issue that can trip some people up is that the file names are case insensitive depending on the server that you are hosting the files. With most Unix based servers (Linux, or OSX), the files are case sensitive. While on Windows servers, they are not.

In the example below, lets say we have image called pinkish.png , the second line will not load the image due to the all caps PNG extension

Additionally for newer extensions such as WebP , browser support common across the latest versions. It will have no or partial support on older browsers. For example Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later.

IE 11 or below will have no support for WebP . WebP images displays as a broken image icon in Microsoft Edge v18 in Application Guard mode even when an alternative image source format is available.

👉 Tip: Use absolute paths

While theres benefits of using relative paths for urls() with background-image , my preference would be to use absolute paths.

👉 Tip: Use Live Server in VS Code!

If you are coding with VS Code, then using the Live Server extension is a must. When you are just coding locally without a local server running, references to images can get a bit confusing.

For example, if you use the root directory / - this could mean your actual C:/ root folder instead of the current folder!

Fix 2 - check the height and width of the element

Lets say we have the following div element with class of .card and we want to set the background-image as below:

In the above case, the div does not have any content so you will not see anything. The div will have a width of 0 and height of 0 . To fix this, we need to explictily set the width and height:

Fix 3 - check the syntax is correct

The syntax for creating background images is pretty straight forward. You can apply multiple images to be layted on top of each other. As an example, the below, we have a catfront.png to be under a gradient image.

We can also set the background-image using the background shorthand property:

The background shorthand covers the following CSS properties:

• background-attachment
• background-clip
• background-color
• background-image
• background-origin
• background-position
• background-repeat
• background-size

In some instances, when using the shorthand, it would seem like the background-image is not working correctly. This might be due to other properies and not the background image itself.

For example, take the following:

This will not work, however if we try to break it down to the explicit CSS properties, it will:

The reason why its not working with the shorthand background property is because we need to specify the position and size as well. So it had nothing to do with our background-image property.

Fix 4 - check other styles for overrides

There could be instances where our background image is not working correctly. Consider the following css:

Now if the catfront.png does not exist, this would mean our card element would not have a background image. The above is not immediately obvious that we are having conflicting background-image set on our card class since we are mixing shorthand vs explicity CSS.

Browser support and bugs

Background-image is generally supported across most browsers so there is not a concern or any weird browser specific hacks or prefixs we need to cater for.

However we should be careful on the type of image we are using. If we are using WebP , Safari 14.0 – 15.6 has full support of WebP, but requires macOS 11 Big Sur or later.

Additionally, there is no support for WebP on IE. As for Edge browsers, WebP images displays as a broken image icon in Microsoft Edge v18 in Application Guard mode even when an alternative image source format is available.

In this post we went over four possible fixes for when a background-image CSS property is not working. This can be due to using incorrect relative paths, the width and height not being specifified explicitly, incorrect use of the syntax, there are other styles that is overriding the background-image style.

Additionally the type of image format needs to be checked - WebP not supported on older browsers like Safari version 16-15.6, IE 11 or lower.

👋 About the Author

G'day! I am Huy a software engineer based in Australia. I have been creating design-centered software for the last 10 years both professionally and as a passion.

My aim to share what I have learnt with you! (and to help me remember 😅)

Follow along on Twitter , GitHub and YouTube

👉 See Also 👈

• CSS important Not Working - and Fixes
• [Fixed] CSS :after element is not working
• [5 FIXES] for CSS z-index not working - Updated for 2023
• CSS pulse animation on hover
• Creating gradient animation with CSS
• CSS case insensitive attribute selector

Stack Exchange Network

Stack Exchange network consists of 183 Q&A communities including Stack Overflow , the largest, most trusted online community for developers to learn, share their knowledge, and build their careers.

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

Why is Safari on my computer rendering all of the colors -- not just for images -- incorrectly?

I’m not just talking about image color profile issues; every single color that the browser renders is incorrect. It’s like it’s in it’s own color space (or something!).

Screenshot: http://drp.ly/DJk1O (Opera, Safari, Chrome, Firefox)

Spot the odd one out? Open this up in Photoshop or similar and try using the eyedropper to select the colour. Safari renders the same hex color completely differently. That color is set using a background-color declaration in CSS, so it should be identical in all four of those browsers.

Here’s the HTML I was using:

Literally every website I’m viewing with my install of Safari is displaying colors incorrectly. The blue of the bar on Facebook is slightly less rich.

This doesn’t occur on any other Macs I’ve tried. Any idea what’s happened to my Safari install?

3 Answers 3

My best guess is that you have a bad display profile.

Safari is correctly obeying the color profile you have set in your display preferences. Whereas the other browsers just ignore any color profile.

Check your  > System Preferences… > Displays > [Color] for which Color Profile you have activated.

Personal opinion: It does not have to be the 100% exact same color across different browsers, it is absolutely fine that it is coherent within the same browser. Normal users don't switch browsers every 5 minutes and compare sites across different browsers. They use one, and most of them use that one exclusively.

I haven't found a way to enable the correct use of ColorSync profiles in Firefox. I don't use Chrome/ium or Opera, so I can't check there.

I managed to diagnose my own issue. It's essentially to do with a bug in this:

http://webkit.org/blog/73/color-spaces/

The best way to resolve it is to delete your ~/Library/Safari/ files and allow the browser to recreate them on next launch.

You must log in to answer this question.

Not the answer you're looking for browse other questions tagged macos mac browser safari ..

• The Overflow Blog
• Supporting the world’s most-used database engine through 2050
• What language should beginning programmers choose?

Hot Network Questions

• Can 501(C)(3) sell items that were donated?
• Based on the current/planned cost of the war, is Israel able to sustain the war in Gaza without extra aid from United States?
• How to force generation of Image thumbnails?
• Precise pronounciation of b, d and g
• Coding challenge for mixing a string
• Non-noetherian schemes with noetherian underlying space (in the Zariski topology)
• No output from PCM5102 I2S DAC
• How can I use GLSL shaders within Mathematica?
• Can copy-pasting a word definition from a dictionary site cause a copyright issue?
• Do I need new rim tape after replacing spoke + nipple?
• How did the ancient cultures determine that the year was actually a fraction of an extra day beyond 365 days?
• Please help check why my opamp calculation has a different answer from my lecturer's
• Why use a special "Name" class (instead of just a string) for representing object names in C++?
• What is some antonym of shortchange?
• Should alat value be used as it is in calculation or multiplied with CELL_PARAMETERS value?
• Calculating spread on a par rate curve given bond’s coupon and yield
• How do normal species and a religious-fanatic species tolerate each other?
• A simple cross-number puzzle
• How to make a sign language that only uses three fingers
• Are there any languages where conditions are not first-class expressions?
• Is there such a thing as a "physical" fractal?
• Is the supposedly fake prophecy of Mahdi that the Bene Gesserit implanted on Arrakis actually a real prophecy?
• Why did XML lose out to XHTML, then HTML 5, on the web?
• Old metal window stuck open and metal strap/band fell out; what to do?

• Main Content

• JavaScript Promises
• ES6 Features

Change Mobile Safari Highlight Color with CSS

I love the amount of extra customization afforded to us by WebKit. That also makes me love the fact that, for the most part, WebKit Mobile is the choice renderer used by mobile devices. One rarely used style property is -webkit-tap-highlight-color , which allows developers to change the default tap highlight color. Here's how to use it!

Changing the -webkit-tap-highlight-color property value is the key! Also note that using RGBA color allows the extra dimension opacity for the highlight so that the color isn't so harsh.

In the case that you have an element which you'd prefer wasn't highlighted at all, you would code:

-webkit-tap-highlight-color obviously isn't a crucial property to change with each site but it's nice to have the ability to change the tap color, especially if you're using dark-colored backgrounds.

Recent Features

JavaScript Promise API

While synchronous code is easier to follow and debug, async is generally better for performance and flexibility. Why "hold up the show" when you can trigger numerous requests at once and then handle them when each is ready?  Promises are becoming a big part of the JavaScript world...

An Interview with Eric Meyer

Your early CSS books were instrumental in pushing my love for front end technologies. What was it about CSS that you fell in love with and drove you to write about it? At first blush, it was the simplicity of it as compared to the table-and-spacer...

Incredible Demos

Cross Browser CSS Box Shadows

Box shadows have been used on the web for quite a while, but they weren't created with CSS -- we needed to utilize some Photoshop game to create them.  For someone with no design talent, a.k.a me, the need to use Photoshop sucked.  Just because we...

CSS Transforms

CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated...

Thanks, David. However I don’t see the change in my experiment on my iPhone and using

and inline version such as style=" -webkit-tap-highlight-color: rgba(27, 75, 69, 1);"

Any idea how to disable this blink/highlight effect in Firefox OS app?

Try setting it to transparent?!

Yes I tried that on both body and anchor tags but it’s not working in Firefox OS simulator :(

-webkit is for Safari and Chrome browser only, and Mozilla -moz don’t have one for this.

Can you tell me how to put a picture when highlighting? Can this be done using CSS3? or do i need to add js for when this is touched add a background pic?

Lovely!! I have been struggling with this issue to get rid of the highlight….This worked!!

• Aroos a:link { -webkit-tap-highlight-color: transparent; }

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

The Fixed Background Attachment Hack

What options do you have if you want the body background in a fixed position where it stays put on scroll? background-attachment: fixed in CSS, at best, does not work well in mobile browsers, and at worst is not even supported by the most widely used mobile browsers. You can ditch this idea completely and let the background scroll on small screens using media queries.

Or get around it with a small fix. I suppose we could call it a “hack” since it’s a workaround in code that arguably we shouldn’t have to do at all.

Before I show you the fix, let’s examine the issue. We can see it by looking at two different approaches to CSS backgrounds:

• a background using a linear gradient
• a background using an image

Linear gradient

I want to keep the background gradient in a fixed position on scroll, so let’s apply basic CSS styling to the body that does exactly that:

Here are the results in Chrome and Firefox, both on Android, respectively:

The gradient simply scrolls along with other content then jumps back. I don’t know exactly why that is — maybe when the URL tab goes up or disappears on scroll and the browser finds it difficult to re-render the gradient in real time? That’s my best guess since it only seems to happen in mobile browsers.

If you’re wondering about iOS Safari, I haven’t tested on iOS personally, but the issue is there too. Some have already reported the issue and it appears to behave similarly.

Background image

This issue with images is no different.

Another interesting thing to note is that when background-attachment: fixed is applied, the height is ignored even if we explicitly specify it. That’s because background-attachment calculates a fixed background position relative to the viewport.

Even if we say the body is 100vh, background-attachment: fixed is not exactly in accordance with it. Weird! Perhaps the reason is that background-attachment: fixed relies on the smallest possible viewport while elements rely on the largest possible viewport. David Bokan explains ,

Lengths defined in viewport units (i.e.  vh ) will not resize in response to the URL bar being shown or hidden. Instead,  vh  units will be sized to the viewport height as if the URL bar is always hidden. That is,  vh  units will be sized to the “largest possible viewport”. This means  100vh  will be larger than the visible height when the URL bar is shown.

The issues are nicely documented over at caniuse :

Firefox does not appear to support the local value when applied on a textarea element. Chrome has an issue that occurs when using the will-change property on a selector which also has background-attachment: fixed defined. It causes the image to get cut off and gain whitespace around it. iOS has an issue preventing background-attachment: fixed from being used with background-size: cover .

Let’s fix it

Call it a temporary hack, if you will. Some of you may have already tried it. Whatever the case, it fixes the linear gradient and background image issues we just saw.

So, as you know, we are getting in trouble with the background-attachment: fixed property and, as you might have guessed, we are removing it from our code. If it’s looking at the smallest possible viewport, then maybe we should be working with an element that looks for the largest possible viewport and position that instead.

So, we are creating two separate elements — one for the background-gradient and another for the rest of the content. We are replacing background-attachment: fixed with position: fixed .

Now, wrap up the rest of the content — except for the element containing the background image — inside a main container.

We can use the same trick hack with background images and it works fine. However, you do get some sort of background scrolling when the URL bar hides itself, but the white patch is no longer there.

Here are my takeaways

A fixed-position element with a height set to 100% behaves just like the element with background-attachment: fixed property, which is clearly evident in the example below! Just observe the right-most bar (purple color) in the video.

Even though, David Bokan in his article states that:

That is, a position: fixed element whose containing block is the ICB will resize in response to the URL bar showing or hiding. For example, if its height is 100% it will always fill exactly the visible height, whether or not the URL bar is shown. Similarly for vh lengths, they will also resize to match the visible height taking the URL bar position into account.

If we take into account that last sentence, that doesn’t seem to be the case here. Elements that have fixed positioning and 100vh height don’t change their height whether the URL bar is shown or not. In fact, the height is according to the height of the “largest possible viewport”. This is evident in the example below. Just observe the light blue colored bar in the video.

So, it appears that, when working with a container that is 100vh, background-attachment: fixed considers the smallest possible viewport height while elements in general consider the largest possible viewport height.

For example, background-attachment: fixed simply stops working when a repaint is needed, like when a mobile browser’s address bar goes away on scroll. The browser adjusts the background according to the largest possible viewport (which is now, in fact, the smallest possible viewport as URL bar is hidden) and the browser isn’t efficient enough to repaint on the fly, which results in a major lag.

Our hack addresses this by making the background an element instead of, well, an actual background. We give the element containing the content an absolute position to stack it on top of the element containing the image, then apply a fixed position on the latter. Hey, it works!

Note that the viewport height is calculated excluding the navigation bar at the bottom (if present). Here’s a comparison between the presence and absence of navigation bar at the bottom in Chrome Android.

Is there a downside? Perhaps! We’re using a general <div> instead of an actual <img> tag, so I wouldn’t say the markup is semantic. And that can lead to accessibility issues . If you’re working with an image that adds meaning or context to the content, then an <img> is the correct way to go, utilizing a proper alt description for screen readers.

But if we go the proper <img> route, then we’re right back where we started. Also, if you have a navigation bar at the bottom which too auto hides itself, then I can’t help it. If the hack won’t cut it, then perhaps JavaScript can come to the rescue .

Nice workaround.

Have you tried applying background-attachment: fixed to the html element itself?

This should arguably not be affected by other styles you used; the exception being ‘position: fixed’ – never use that on the root element . In this way you’re left free to use the other background related styles on body, even in shorthand.

Note that I have not tested this.

Happy hacking!

Man, you just saved my day! I hope you have a cold beer in the next 24hrs. Cheers!

I meant to write ‘other styles’ and not ‘other background-related styles’ in my previous reply. Naturally, all ‘background-related’ styles should be on the same element. I need coffee. Cheers.

A method I’ve used that seems to behave on desktop and mobile, is to apply a background-image to a pseudo-element, sized to match the content, like so:

This also works with ::after .

The only drawback I’ve found is it takes up one pseudo-element.

If that is a problem, because you need that particular pseudo-element for another purpose, then just use a nested element with similar CSS as for using a pseudo-element.

If there are other methods out there that also do the trick, I’d love to know about them.

Thanks for the idea, I attempted to put it into practice but using position fixed seems to want to use the root as a container even when the direct parent has position relative

I always do this with ::before instead of an actual element.

Please try this with 2 or 3 pictures in a row. So text 1 is larger than image 1 and should scroll in it. Then image 2 should come and scroll a text in it again. A one-pager with pictures, so to speak

I haven’t been able to get it to work for more than 1 image, with CSS only. I’m still working on a solution that has multiple images, that depends upon JS, but I’m afraid, even before starting, that it will not be very performant. IF anyone has any suggestions?

Hi thank for this informations. I’m a novice. please, can you explain where to place the code in wordpress theme editor? thank in advance for your help : )

This is a great approach, and has the additional advantage of allowing us to set an offset at the top and/or bottom to compensate for a fixed header and/or footer, meaning that the top or bottom parts of the background image would still be visible, not hidden by header or footer.

Usually i don’t comment, but i was looking for a solution to the mobile-url-bar-resize-problem for years and i must have read way over 100 articles on that topic, none of them solving the problem.

So please, accept my humble “Thank you”.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Save my name, email, and website in this browser for the next time I comment.

Copy and paste this code: micuno *

Leave this field empty

If Safari doesn't open a page or work as expected on your Mac

If Safari doesn't load a webpage, stops responding, quits unexpectedly, or otherwise doesn't work as expected, these solutions might help.

These solutions are for issues that can affect Safari on Mac, including issues such as these:

A webpage is blank, doesn't load all of its content, or otherwise doesn't work as expected.

You can't sign in to a webpage, despite using the correct sign-in information.

A webpage asks you to remove or reset cookies.

Safari slows down, stops responding, or quits unexpectedly.

Reload the page

From the menu bar in Safari, choose View > Reload Page. Or press Command-R.

If Safari doesn't reload the page, quit Safari, then try again. If Safari doesn't quit, you can press Option-Command-Esc to force Safari to quit .

If Safari automatically reopens unwanted pages, quit Safari, then press and hold the Shift key while opening Safari. Learn how to control which windows Safari automatically reopens .

Install software updates and restart

Update macOS , which can include updates for Safari. If your Mac didn't restart automatically, choose Apple menu  > Restart. Some important background updates take effect only after restarting.

Check Safari extensions

If you installed any Safari extensions, turn extensions off. From the menu bar in Safari, choose Safari > Settings (or Preferences). Click Extensions, then deselect each extension to turn it off. Learn more about Safari extensions .

If you find that an extension is causing the issue, make sure that the extension is up to date.

Test with a private window

A website can store cookies, caches, and other data on your Mac, and issues with that data can affect your use of the website. To prevent the website from using that data, view it in a private window: From the menu bar in Safari, choose File > New Private Window, or press Shift-Command-N.

If that works, use the following steps to remove the website's data, including its caches and cookies. The website can then create new data as needed. If it's a website that you sign in to, make sure that you know your sign-in information before continuing.

Choose Safari > Settings (or Preferences), then click Privacy.

Click Manage Website Data.

Select the affected website from the list shown.

Click Remove.

Click Done.

Open the website again in a non-private browser window.

Check Safari settings

The webpage might not be compatible with one or more browser settings, which you can turn on or off as needed. From the menu bar in Safari, choose Safari > Settings (or Preferences). Then click Websites, Privacy, or Security to access these settings:

Privacy settings . These settings apply to all websites. For example, a website might require that you allow cross-site tracking, show your IP address, or allow cookies.

Security settings . These settings apply to all websites. For example, a website might require that you enable JavaScript.

Websites settings . These settings can be configured for specific websites. For example, a website might require that you allow pop-up windows, allow downloads, allow access to your camera or microphone, or turn off content blockers.

Check iCloud Private Relay

If you subscribe to iCloud+ and are using its Private Relay feature, try reloading the page without Private Relay: From the menu bar in Safari, choose View > Reload and Show IP Address. This menu item appears only when Private Relay is turned on for your network. Learn more about iCloud Private Relay .

Check VPN or other security software

If you installed VPN or other software that monitors or interacts with your network connections, that software could affect your use of the website or the internet. Learn about network issues related to VPN and other software .

Check network settings

Certain network settings, such as custom proxy settings or custom DNS settings , can affect access to content on the internet. Even if you haven't changed these or other network settings yourself, you might have installed software that changed them for you.

To find out whether the issue is with the network settings on your Mac, try viewing the page from a different web browser or different device on the same network. Or reset your network settings by setting up a new network location on your Mac.

If the issue affects other devices and web browsers on the same network, the issue is probably with the website, and you should contact the website developer for help.

If the issue continues to affect only a particular webpage, contact the website developer for help.

Learn how to block pop-up ads and windows in Safari .

Learn what to do if your iCloud or Safari bookmarks aren't syncing .

Related topics

Explore Apple Support Community

Find what’s been asked and answered by Apple customers.