safari not working js

How to Enable JavaScript on Apple Safari (iPad, iPhone iOS)

Are you having a hard time in trying to turn on JavaScript on your iPad or Apple iPhone device?

JavaScript has evolved into an essential tool that makes the web what it is today. It controls the dynamic elements of web pages, and most websites will fail to run correctly if your Apple Safari browser does not have its JavaScript enabled. Although disabling JavaScript offers browsers faster loading of a website, you should know that it reduces the overall browsing experience on your iPad or iPhone device.

Be it an iPhone 11, iPhone 10 or MacOS device, the steps in this guide will help you learn the simple process and benefits of enabling the JavaScript feature on your Safari browser.

Instructions for Web Developers

You may want to consider linking to this site, to educate any script-disabled users on how to enable JavaScript in six most commonly used browsers. You are free to use the code below and modify it according to your needs.

On enablejavascript.io we optimize the script-disabled user experience as much as we can:

• The instructions for your browser are put at the top of the page
• All the images are inlined, full-size, for easy perusing

We want your visitors to have JavaScript enabled just as much as you do!

What Is JavaScript and Why Do I Need It?

JavaScript is a type of code used by web developers to install and establish interactive content on websites – in essence, it allows web pages to dynamically load and send content in the background without page loads on your Apple Safari browser. Generally, JavaScript is used by modern websites to provide various features such as display advertisements – the reason why a small subset of internet users want it disabled.

However, disabling the JavaScript feature on your Safari web browser is much more of a hassle than it seems. If you turn off JavaScript on your browser, many websites won’t function properly. In most cases, you will also be unable to enjoy certain functions or view content that you are accustomed to accessing on JavaScript-based websites.

How to Enable JavaScript on Safari ​

Here’s how to turn on JavaScript on Safari:

1. Select the “Safari” icon on your home screen.

2. Scroll down the Settings page to find the menu item labelled “Safari”, and then select it.

3. Scroll to the bottom of the Safari menu and choose “Advanced” – choosing this will reveal the advanced settings for your Safari browser.

4. On the Advanced menu, find the option for enabling or disabling “JavaScript” for your Safari browser. On finding the JavaScript option, you’ll see a button next to it.

5. Now slide this button to the right to turn on JavaScript on your Safari browser.

6. That’s it! You’ve just enabled JavaScript.

How to Disable JavaScript on Safari ​

Here’s how to turn off JavaScript on Safari:

1. Tap on the “Settings” icon on your home screen.

5. Now slide this button to the left to turn off JavaScript on your Safari browser.

6. That’s it! You’ve just disabled JavaScript. ​

How to Enable JavaScript on Mac

Follow the steps below to activate JavaScript in Safari on Mac:

1. Open the Safari application by clicking on an icon that appears like a compass in your bottom toolbar.

2. Click on the “Safari” menu at the top left corner of the browser.

3. Under the Safari menu, find and click on “Preferences”. This will open a pop-up menu.

4. Move your cursor over to the “Security” tab and select it.

5. Now check the box beside “Enable JavaScript” to turn on JavaScript. Make sure the box is checked.

6. You can now close the “Preferences” window to apply your settings.

7. That’s it! You’ve enabled JavaScript.

8. Restart your browser.

How to Disable JavaScript in Safari on Mac

Follow the steps below to disable JavaScript in Safari on Mac:

2. Click on “Safari” menu at the top left corner of the browser.

3. Under the Safari menu, find and click on “Preferences”. This will open a dropdown menu.

4. Move your cursor over to the “Security” tab and then click on it.

5. Now uncheck the box beside “Enable JavaScript” to disable JavaScript.

7. That’s it! You’ve disabled JavaScript.

8. Restart your browser. 

Apple Safari comes built-in with a JavaScript engine that makes website elements interactive. And while it isn't actually necessary that you enable it to use your Safari browser, it's something that you'll perhaps want to do to enjoy a seamless browsing experience. Otherwise, many websites you visit will appear broken or won't even work.

JavaScript is enabled by default in Apple Safari, but you can verify if yours is active through the Safari tab. To do this, simply click on "Safari" at the top left of your screen to expand the Menu. Next, click on Preferences to reveal the Safari Preferences section. Now that you're in the Preferences section, find and click the "Security" tab to access the "Enable JavaScript" checkbox. If the checkbox has a tick symbol, it means JavaScript is active and working.

Millions of websites use JavaScript to display interactive elements, such as animations, special effects and more. If you browse them with JavaScript disabled in your Apple Safari, then you probably won't have the full experience that you normally would. Some JavaScript-based websites may appear dull or static, while others may not even work at all.

Olumide is a longtime writer who started his career as a digital marketer before transitioning into a copywriter almost eight years ago.

• – Google Chrome
• – Internet Explorer
• – Microsoft Edge
• – Mozilla Firefox
• – Apple Safari

How to enable JavaScript in your browser and why http://www.enablejavascript.io/

How to enable Javascript in Safari on a Mac computer to prevent website errors

• To enable Javascript on a Mac while using Safari , you'll need to open Safari and navigate to its Security menu.
• Enabling Javascript can help you view web pages properly — without it, many websites and programs may not load.
• It should only take a minute or so to enable Javascript in Safari on your Mac .
• Visit Business Insider's homepage for more stories .

Javascript is an extremely common programming language that's used across the internet. 

And while it isn't necessarily required that you enable it in order to use Safari , it's something that you'll probably want to do. Otherwise, many websites you visit will look strange, or even broken.

Enabling Javascript in your Mac's default browser, Safari , is an easy process. In fact, it should only take you only a minute or so to complete.

Check out the products mentioned in this article:

Macbook pro (from $1,299.99 at best buy), how to enable javascript on a mac.

1. Open Safari (it's the compass icon that, by default, lives in your bottom toolbar).

2. In the top toolbar, select "Safari."

3. In the dropdown menu, click "Preferences."

4. Toggle over to the "Security" tab.

5. Check the box next to "Enable Javascript."

Once you've done that, you can close out the "Preferences" window, and you're good to go. 

If you use more than one browser, you may wish to enable it on those other browsers as well. On Chrome, for example, you'll still go through the "Preferences" menu at the top of the screen. Then type "Javascript" in the search bar and make sure that it says "Allowed" under "Javascript."

Related coverage from  How To Do Everything: Tech :

How to enable adobe flash player on a mac computer using safari, how to block pop-ups on a mac computer's safari browser, and avoid fraudulent websites, how to add websites to your favorites list on a mac's safari browser, making them easily accessible at any moment, how to save and delete webpages on the reading list in your mac computer's safari browser.

Insider Inc. receives a commission when you buy through our links.

Watch: Apple just launched a $6,000 Mac Pro, available this fall

• Main content

404 Not found

Get high quality AI code reviews

• 90+ point analyses every run
• AI that understands your code

Safari Javascript Not Working: Javascript Explained

Table of contents.

With the increasing ubiquity of JavaScript in the online world, it’s not uncommon to encounter errors or other issues related to the code when using the Safari browser. Whether you are a beginner programmer, or a seasoned web developer, this comprehensive guide will help you better understand the foundation of what JavaScript is, why it is important for web development, and how to troubleshoot and fix errors in Safari.

What is JavaScript and How Does it Work?

JavaScript is a programming language used on websites that allows for dynamic interactivity, animation, and other variety of applications. It works with the browser (such as Safari) to allow the user to interact with web pages. By writing JavaScript code in an HTML page, web developers can create interactive experiences that respond to users’ actions. For instance, when a user clicks on a button, JavaScript can be used to change the content on the page. It can also be used to animate elements, send data to a server, and perform various other tasks.

Troubleshooting Tips for Safari Javascript

If you’re having trouble with JavaScript on your Safari browser, there are some steps you can take to troubleshoot the problems you’re experiencing. First and foremost, make sure your browser is up to date. Apple regularly releases updates that can help with security and performance. Additionally, make sure that any extensions or plugins you have installed are also up to date. If those are all up to date, then you can safely try restarting your browser and/or your computer.

If restarting the browser and computer doesn’t resolve the issue, try testing the page in another browser such as Chrome or Firefox. If you can access the page in another browser but it still fails in Safari, then the issue is likely in relation to compatibility or cookie/cache settings. Try clearing the cache and cookies from the Safari browser, then relaunching it.

If the issue persists, you may need to disable any extensions or plugins you have installed. This can be done by going to the Safari menu and selecting Preferences. From there, you can select the Extensions tab and disable any extensions you have installed. Once you have done this, restart the browser and try again.

Common Issues with Javascript in Safari

Common issues that can occur when using JavaScript in Safari include conflicts with incompatible plugins/extensions, slow loading times due to heavy JavaScript code, and incompatibility between different versions of browsers (ie. Safari v5 versus v10). Additionally, it is common for JavaScript errors to appear when using third-party services such as APIs or embed code from other websites.

In order to troubleshoot these issues, it is important to first identify the source of the problem. This can be done by disabling any plugins or extensions that may be causing conflicts, and by checking the browser version to ensure compatibility. Additionally, it is important to check the code for any errors or typos that may be causing the issue. If the issue persists, it may be necessary to contact the third-party service provider for assistance.

How to Fix JavaScript Errors in Safari

If you are encountering errors with your JavaScript code in Safari, the first step is to figure out exactly what the error message says. This will help you identify the root cause of the problem so that you can fix it quickly. Common errors include syntax errors (where the code may be incorrect or unparsable), referencing errors (where your code refers to something that doesn’t exist), and logic errors (where your code produces unexpected results). Furthermore, many code errors can be traced back to coding practices that are discouraged by best programming practices.

Once you’ve identified the source of the error, it’s time to fix it. If it’s a syntax error or a coding practice issue, then you must go back and edit the code accordingly. If the issue is due to a conflict between different versions of browsers, then you should look into ways to update your code so that it is compatible with all versions of Safari. Finally, if the issue persists after attempting all of these steps, then it may be necessary to contact a professional web developer for help.

It is important to remember that debugging JavaScript errors can be a time-consuming process. It is important to be patient and methodical when troubleshooting errors, as it can take some time to identify the root cause of the issue. Additionally, it is important to keep track of the changes you make to the code, as this will help you identify any potential issues that may arise in the future.

Understanding Advanced JavaScript Features in Safari

As you get more comfortable with JavaScript, you may want to consider upgrading your web development skills and exploring some of the more advanced features within Safari. These features include Apple-specific features such as Apple Pay, Core Image filters, Core Animation, SVG support, and integration with iCloud Data. With the core features of JavaScript and a bit of research into more advanced features within Safari, you’ll be able to take your web development skills to new heights.

In addition to the features mentioned above, Safari also offers a variety of tools and APIs that can help you create more dynamic and interactive web applications. For example, the WebKit framework provides a powerful set of tools for creating rich user interfaces, while the JavaScriptCore API allows you to access the full power of JavaScript. With these tools, you can create powerful web applications that are optimized for Safari.

Best Practices for Debugging and Optimizing JavaScript in Safari

When editing your JavaScript code for Safari, it is important to keep some best practices in mind in order to ensure that your code runs optimally. First and foremost, take some time to read up on various debugging techniques for JavaScript and familiarize yourself with debugging tools such as Firebug for Firefox or Chrome Developer Tools for Chrome. Additionally, use comments throughout your code so that you can easily identify areas of your code that need attention.

Finally, it is important to take time to optimize your code for Safari. Use optimization techniques such as caching of resources and efficient data structures in order to ensure smooth compatibility between the browser and your code. With optimization techniques in place, your JavaScript code will run faster and more efficiently across different versions of Safari.

It is also important to test your code in different versions of Safari to ensure that it is compatible with all versions. Additionally, use minification techniques to reduce the size of your code and make it easier to debug. By following these best practices, you can ensure that your JavaScript code runs optimally in Safari.

Alternatives to Safari’s JavaScript Functionality

If you’re looking into alternatives to Safari’s JavaScript functionality, then you should consider either Firefox or Chrome. Firefox offers a wide range of features related to web development, such as its built-in developer tools and support for HTML5. Additionally, both browsers provide additional features and extensions that can expand its functionality. Furthermore, both Chrome and Firefox support the most recent version of JavaScript (ECMAScript 5), ensuring an optimal experience for users who prefer either browser.

In summing up this comprehensive guide on Safari Javascript, we have discussed what Javascript is and how it works within the web browse as well as offering several tips for troubleshooting any issues you might encounter while coding in this language. Additionally, we have outlined common issues related to Javascript in Safari and strategies for optimally debugging and optimizing your code while exploring alternatives such as Firefox or Chrome.

Sarang Sharma

Sarang Sharma is Software Engineer at Bito with a robust background in distributed systems, chatbots, large language models (LLMs), and SaaS technologies. With over six years of experience, Sarang has demonstrated expertise as a lead software engineer and backend engineer, primarily focusing on software infrastructure and design. Before joining Bito, he significantly contributed to Engati, where he played a pivotal role in enhancing and developing advanced software solutions. His career began with foundational experiences as an intern, including a notable project at the Indian Institute of Technology, Delhi, to develop an assistive website for the visually challenged.

Written by developers for developers

Latest posts, mastering python’s writelines() function for efficient file writing | a comprehensive guide, understanding the difference between == and === in javascript – a comprehensive guide, compare two strings in javascript: a detailed guide for efficient string comparison, exploring the distinctions: == vs equals() in java programming, understanding matplotlib inline in python: a comprehensive guide for visualizations, related articles.

Cut review time by 50%

• Join us on Slack
• Twitter / X
• AI Code Review Agent
• AI Chat in your IDE
• AI Chat in your CLI
• AI Code Completions
• AI Prompt Templates
• AI Automations
• Documentation Agent
• Unit Test Agent
• Documentation
• 2023 State of AI in Software Report
• 2023 How Devs use AI Report
• Dev Resources
• Terms of Use
• Privacy Statement
• © 2023 Bito. All rights reserved.

Install on IDEs like IntelliJ, WebStorm etc.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free

Handling common JavaScript problems

• Overview: Cross browser testing

Now we'll look at common cross-browser JavaScript problems and how to fix them. This includes information on using browser dev tools to track down and fix problems, using Polyfills and libraries to work around problems, getting modern JavaScript features working in older browsers, and more.

The trouble with JavaScript

Historically, JavaScript was plagued with cross-browser compatibility problems — back in the 1990s, the main browser choices back then (Internet Explorer and Netscape) had scripting implemented in different language flavors (Netscape had JavaScript, IE had JScript and also offered VBScript as an option), and while at least JavaScript and JScript were compatible to some degree (both based on the ECMAScript specification), things were often implemented in conflicting, incompatible ways, causing developers many nightmares.

Such incompatibility problems persisted well into the early 2000s, as old browsers were still being used and still needed supporting. For example, code to create XMLHttpRequest objects had to have special handling for Internet Explorer 6:

This is one of the main reasons why libraries like jQuery came into existence — to abstract away differences in browser implementations, so a developer could just use, for example, jQuery.ajax() , which would then handle the differences in the background.

Things have improved significantly since then; modern browsers do a good job of supporting "classic JavaScript features", and the requirement to use such code has diminished as the requirement to support older browsers has lessened (although bear in mind that they have not gone away altogether).

These days, most cross-browser JavaScript problems are seen:

• When poor-quality browser-sniffing code, feature-detection code, and vendor prefix usage block browsers from running code they could otherwise use just fine.
• When developers make use of new/nascent JavaScript features, modern Web APIs, etc. in their code, and find that such features don't work in older browsers.

We'll explore all these problems and more below.

Fixing general JavaScript problems

As we said in the previous article on HTML/CSS, you should make sure your code is working generally, before going on to concentrate on the cross-browser issues. If you are not already familiar with the basics of Troubleshooting JavaScript , you should study that article before moving on. There are a number of common JavaScript problems that you will want to be mindful of, such as:

• Basic syntax and logic problems (again, check out Troubleshooting JavaScript ).
• Making sure variables, etc. are defined in the correct scope, and you are not running into conflicts between items declared in different places (see Function scope and conflicts ).
• Confusion about this , in terms of what scope it applies to, and therefore if its value is what you intended. You can read What is "this"? for a light introduction; you should also study examples like this one , which shows a typical pattern of saving a this scope to a separate variable, then using that variable in nested functions so you can be sure you are applying functionality to the correct this scope.
• Incorrectly using functions inside loops that iterate with a global variable (more generally "getting the scope wrong").

For example, in bad-for-loop.html (see source code ), we loop through 10 iterations using a variable defined with var , each time creating a paragraph and adding an onclick event handler to it. When clicked, we want each one to display an alert message containing its number (the value of i at the time it was created). Instead they all report i as 11 — because the for loop does all its iterating before nested functions are invoked.

The easiest solution is to declare the iteration variable with let instead of var —the value of i associated with the function is then unique to each iteration. See good-for-loop.html (see the source code also) for a version that works.

• Making sure asynchronous operations have completed before trying to use the values they return. This usually means understanding how to use promises : using await appropriately or running the code to handle the result of an asynchronous call in the promise's then() handler. See How to use promises for an introduction to this topic.

Note: Buggy JavaScript Code: The 10 Most Common Mistakes JavaScript Developers Make has some nice discussions of these common mistakes and more.

As with HTML and CSS , you can ensure better quality, less error-prone JavaScript code using a linter, which points out errors and can also flag up warnings about bad practices, etc., and be customized to be stricter or more relaxed in their error/warning reporting. The JavaScript/ECMAScript linters we'd recommend are JSHint and ESLint ; these can be used in a variety of ways, some of which we'll detail below.

The JSHint homepage provides an online linter, which allows you to enter your JavaScript code on the left and provides an output on the right, including metrics, warnings, and errors.

Code editor plugins

It is not very convenient to have to copy and paste your code over to a web page to check its validity several times. What you really want is a linter that will fit into your standard workflow with the minimum of hassle. Many code editors have linter plugins. For example, see the "Plugins for text editors and IDEs" section of the JSHint install page .

There are other ways to use such linters; you can read about them on the JSHint and ESLint install pages.

It is worth mentioning command line uses — you can install these tools as command line utilities (available via the CLI — command line interface) using npm (Node Package Manager — you'll have to install NodeJS first). For example, the following command installs JSHint:

You can then point these tools at JavaScript files you want to lint, for example:

You can also use these tools with a task runner/build tool such as Gulp or Webpack to automatically lint your JavaScript during development. (see Using a task runner to automate testing tools in a later article.) See ESLint integrations for ESLint options; JSHint is supported out of the box by Grunt, and also has other integrations available, e.g. JSHint loader for Webpack .

Note: ESLint takes a bit more setup and configuration than JSHint, but it is more powerful too.

Browser developer tools

Browser developer tools have many useful features for helping to debug JavaScript. For a start, the JavaScript console will report errors in your code.

Make a local copy of our fetch-broken example (see the source code also).

If you look at the console, you'll see an error message. The exact wording is browser-dependent, but it will be something like: "Uncaught TypeError: heroes is not iterable", and the referenced line number is 25. If we look at the source code, the relevant code section is this:

So the code falls over as soon as we try to use jsonObj (which as you might expect, is supposed to be a JSON object ). This is supposed to be fetched from an external .json file using the following fetch() call:

But this fails.

The Console API

You may already know what is wrong with this code, but let's explore it some more to show how you could investigate this. For a start, there is a Console API that allows JavaScript code to interact with the browser's JavaScript console. It has a number of features available, but the one you'll use most often is console.log() , which prints a custom message to the console.

Try adding a console.log() call to log the return value of fetch() , like this:

Refresh the page in the browser. This time, before the error message, you'll see a new message logged to the console:

The console.log() output shows that the return value of fetch() is not the JSON data, it's a Promise . The fetch() function is asynchronous: it returns a Promise that is fulfilled only when the actual response has been received from the network. Before we can use the response, we have to wait for the Promise to be fulfilled.

We can do this by putting the code that uses the response inside the then() method of the returned Promise , like this:

To summarize, anytime something is not working and a value does not appear to be what it is meant to be at some point in your code, you can use console.log() to print it out and see what is happening.

Using the JavaScript debugger

Unfortunately, we still have the same error — the problem has not gone away. Let's investigate this now, using a more sophisticated feature of browser developer tools: the JavaScript debugger as it is called in Firefox.

Note: Similar tools are available in other browsers; the Sources tab in Chrome, Debugger in Safari (see Safari Web Development Tools ), etc.

In Firefox, the Debugger tab looks like this:

• On the left, you can select the script you want to debug (in this case we have only one).
• The center panel shows the code in the selected script.
• The right-hand panel shows useful details pertaining to the current environment — Breakpoints , Callstack and currently active Scopes .

The main feature of such tools is the ability to add breakpoints to code — these are points where the execution of the code stops, and at that point you can examine the environment in its current state and see what is going on.

Let's get to work. The error is now being thrown at line 26. Click on line number 26 in the center panel to add a breakpoint to it (you'll see a blue arrow appear over the top of it). Now refresh the page (Cmd/Ctrl + R) — the browser will pause execution of the code at line 51. At this point, the right-hand side will update to show some very useful information.

• Under Breakpoints , you'll see the details of the break-point you have set.
• Under Call Stack , you'll see a few entries — this is basically a list of the series of functions that were invoked to cause the current function to be invoked. At the top, we have showHeroes() the function we are currently in, and second we have onload , which stores the event handler function containing the call to showHeroes() .
• Under Scopes , you'll see the currently active scope for the function we are looking at. We only have three — showHeroes , block , and Window (the global scope). Each scope can be expanded to show the values of variables inside the scope when execution of the code was stopped.

We can find out some very useful information in here.

• Expand the showHeroes scope — you can see from this that the heroes variable is undefined , indicating that accessing the members property of jsonObj (first line of the function) didn't work.
• You can also see that the jsonObj variable is storing a Response object, not a JSON object.

The argument to showHeroes() is the value the fetch() promise was fulfilled with. So this promise is not in the JSON format: it is a Response object. There's an extra step needed to retrieve the content of the response as a JSON object.

We'd like you to try fixing this problem yourself. To get you started, see the documentation for the Response object. If you get stuck, you can find the fixed source code at https://github.com/mdn/learning-area/blob/main/tools-testing/cross-browser-testing/javascript/fetch-fixed .

Note: The debugger tab has many other useful features that we've not discussed here, for example conditional breakpoints and watch expressions. For a lot more information, see the Debugger page.

Performance issues

As your apps get more complex and you start to use more JavaScript, you may start to run into performance problems, especially when viewing apps on slower devices. Performance is a big topic, and we don't have time to cover it in detail here. Some quick tips are as follows:

• To avoid loading more JavaScript than you need, bundle your scripts into a single file using a solution like Browserify . In general, reducing the number of HTTP requests is very good for performance.
• Make your files even smaller by minifying them before you load them onto your production server. Minifying squashes all the code together onto a huge single line, making it take up far less file size. It is ugly, but you don't need to read it when it is finished! This is best done using a minification tool like Uglify (there's also an online version — see JSCompress.com )
• When using APIs, make sure you turn off the API features when they are not being used; some API calls can be really expensive on processing power. For example, when showing a video stream, make sure it is turned off when you can't see it. When tracking a device's location using repeated Geolocation calls, make sure you turn it off when the user stops using it.
• Animations can be really costly for performance. A lot of JavaScript libraries provide animation capabilities programmed by JavaScript, but it is much more cost effective to do the animations via native browser features like CSS Animations (or the nascent Web Animations API ) than JavaScript. Read Brian Birtles' Animating like you just don't care with Element.animate for some really useful theory on why animation is expensive, tips on how to improve animation performance, and information on the Web Animations API.

Note: Addy Osmani's Writing Fast, Memory-Efficient JavaScript contains a lot of detail and some excellent tips for boosting JavaScript performance.

Cross-browser JavaScript problems

In this section, we'll look at some of the more common cross-browser JavaScript problems. We'll break this down into:

• Using modern core JavaScript features
• Using modern Web API features
• Using bad browser sniffing code
• Performance problems

Using modern JavaScript/API features

In the previous article we described some of the ways in which HTML and CSS errors and unrecognized features can be handled due to the nature of the languages. JavaScript is not as permissive as HTML and CSS however — if the JavaScript engine encounters mistakes or unrecognized syntax, such as when new, unsupported features are used, more often than not it will throw errors.

There are a few strategies for handling new feature support; let's explore the most common ones.

Note: These strategies do not exist in separate silos — you can, of course combine them as needed. For example, you could use feature detection to determine whether a feature is supported; if it isn't, you could then run code to load a polyfill or a library to handle the lack of support.

Feature detection

The idea behind feature detection is that you can run a test to determine whether a JavaScript feature is supported in the current browser, and then conditionally run code to provide an acceptable experience both in browsers that do and don't support the feature. As a quick example, the Geolocation API (which exposes available location data for the device the web browser is running on) has a main entry point for its use — a geolocation property available on the global Navigator object. Therefore, you can detect whether the browser supports geolocation or not by using something like the following:

You could also write such a test for a CSS feature, for example by testing for the existence of element.style.property (e.g. paragraph.style.transform !== undefined ). If you're looking to apply styles if a CSS feature is supported, you can directly use the @supports at-rule (known as a feature query). For example, to check whether the browser supports CSS container queries, you could do something like this:

As a last point, don't confuse feature detection with browser sniffing (detecting what specific browser is accessing the site) — this is a terrible practice that should be discouraged at all costs. See Using bad browser sniffing code , later on, for more details.

Note: Feature detection will be covered in a lot more detail in its own dedicated article, later in the module.

JavaScript libraries are essentially third party units of code that you can attach to your page, providing you with a wealth of ready-made functionality that can be used straight away, saving you a lot of time in the process. A lot of JavaScript libraries probably came into existence because their developer was writing a set of common utility functions to save them time when writing future projects, and decided to release them into the wild because other people might find them useful too.

JavaScript libraries tend to come in a few main varieties (some libraries will serve more than one of these purposes):

• Utility libraries: Provide a bunch of functions to make mundane tasks easier and less boring to manage. jQuery for example provides its own fully-featured selectors and DOM manipulation libraries, to allow CSS-selector type selecting of elements in JavaScript and easier DOM building. It is not so important now we have modern features like Document.querySelector() / Document.querySelectorAll() / Node methods available across browsers, but it can still be useful when older browsers need supporting.
• Convenience libraries: Make difficult things easier to do. For example, the WebGL API is really complex and challenging to use when you write it directly, so the Three.js library (and others) is built on top of WebGL and provides a much easier API for creating common 3D objects, lighting, textures, etc. The Service Worker API is also very complex to use, so code libraries have started appearing to make common Service Worker uses-cases much easier to implement (see the Service Worker Cookbook for several useful code samples).
• Effects libraries: These libraries are designed to allow you to easily add special effects to your websites. This was more useful back when "DHTML" was a popular buzzword, and implementing an effect involved a lot of complex JavaScript, but these days browsers have a lot of built in CSS features and APIs to implementing effects more easily.
• UI libraries: Provide methods for implementing complex UI features that would otherwise be challenging to implement and get working cross browser, for example Foundation , Bootstrap , and Material-UI (the latter is a set of components for use with the React framework). These tend to be used as the basis of an entire site layout; it is often difficult to drop them in just for one UI feature.
• Normalization libraries: Give you a simple syntax that allows you to easily complete a task without having to worry about cross browser differences. The library will manipulate appropriate APIs in the background so the functionality will work whatever the browser (in theory). For example, LocalForage is a library for client-side data storage, which provides a simple syntax for storing and retrieving data. In the background, it uses the best API the browser has available for storing the data, whether that is IndexedDB , Web Storage , or even Web SQL (which is now deprecated, but is still supported in Chromium-based browsers in secure contexts). As another example, jQuery

When choosing a library to use, make sure that it works across the set of browsers you want to support, and test your implementation thoroughly. Also make sure that the library is popular and well-supported, and isn't likely to just become obsolete next week. Talk to other developers to find out what they recommend, see how much activity and how many contributors the library has on GitHub (or wherever else it is stored), etc.

Library usage at a basic level tends to consist of downloading the library's files (JavaScript, possibly some CSS or other dependencies too) and attaching them to your page (e.g. via a <script> element), although there are normally many other usage options for such libraries, like installing them as Bower components, or including them as dependencies via the Webpack module bundler. You will have to read the libraries' individual install pages for more information.

Note: You will also come across JavaScript frameworks in your travels around the Web, like Ember and Angular . Whereas libraries are often usable for solving individual problems and dropping into existing sites, frameworks tend to be more along the lines of complete solutions for developing complex web applications.

Polyfills also consist of 3rd party JavaScript files that you can drop into your project, but they differ from libraries — whereas libraries tend to enhance existing functionality and make things easier, polyfills provide functionality that doesn't exist at all. Polyfills use JavaScript or other technologies entirely to build in support for a feature that a browser doesn't support natively. For example, you might use a polyfill like es6-promise to make promises work in browsers where they are not supported natively.

Let's work through an exercise — in this example used for demonstration purposes only, we use a Fetch polyfill and an es6-promise polyfill. While Fetch and promises are fully supported in modern browsers, if we were targeting a browser that did not support Fetch that browser would likely not support Fetch either, and Fetch makes heavy use of promises:

• To get started, make a local copy of our fetch-polyfill.html example and our nice image of some flowers in a new directory. We are going to write code to fetch the flowers image and display it in the page.
• Next, save a copy of the Fetch polyfill in the same directory as the HTML.
• Apply the polyfill scripts to the page using the following code — place these above the existing <script> element so they will be available on the page already when we start trying to use Fetch (we are also loading a Promise polyfill from a CDN, as IE11 does support promises, which fetch requires): html < script src = " https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.min.js " > </ script > < script src = " https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.min.js " > </ script > < script src = " fetch.js " > </ script >
• Inside the original <script> , add the following code: js const myImage = document . querySelector ( ".my-image" ) ; fetch ( "flowers.jpg" ) . then ( ( response ) => { response . blob ( ) . then ( ( myBlob ) => { const objectURL = URL . createObjectURL ( myBlob ) ; myImage . src = objectURL ; } ) ; } ) ;

Note: You can find our finished version at fetch-polyfill-finished.html (see also the source code ).

Note: Again, there are many different ways to make use of the different polyfills you will encounter — consult each polyfill's individual documentation.

One thing you might be thinking is "why should we always load the polyfill code, even if we don't need it?" This is a good point — as your sites get more complex and you start to use more libraries, polyfills, etc., you can start to load a lot of extra code, which can start to affect performance, especially on less-powerful devices. It makes sense to only load files as needed.

Doing this requires some extra setup in your JavaScript. You need some kind of a feature detection test that detects whether the browser supports the feature we are trying to use:

So first we run a conditional that checks whether the function browserSupportsAllFeatures() returns true. If it does, we run the main() function, which will contain all our app's code. browserSupportsAllFeatures() looks like this:

Here we are testing whether the Promise object and fetch() function exist in the browser. If both do, the function returns true. If the function returns false , then we run the code inside the second part of the conditional — this runs a function called loadScript(), which loads the polyfills into the page, then runs main() after the loading has finished. loadScript() looks like this:

This function creates a new <script> element, then sets its src attribute to the path we specified as the first argument ( 'polyfills.js' when we called it in the code above). When it has loaded, we run the function we specified as the second argument ( main() ). If an error occurs in the loading of the script, we still call the function, but with a custom error that we can retrieve to help debug a problem if it occurs.

Note that polyfills.js is basically the two polyfills we are using put together into one file. We did this manually, but there are cleverer solutions that will automatically generate bundles for you — see Browserify (see Getting started with Browserify for a basic tutorial). It is a good idea to bundle JS files into one like this — reducing the number of HTTP requests you need to make improves the performance of your site.

You can see this code in action in fetch-polyfill-only-when-needed.html (see the source code also ). We'd like to make it clear that we can't take credit for this code — it was originally written by Philip Walton. Check out his article Loading Polyfills Only When Needed for the original code, plus a lot of useful explanation around the wider subject).

JavaScript transpiling

Another option that is becoming popular for people who want to use modern JavaScript features now is converting code that uses recent ECMAScript features to a version that will work in older browsers.

Note: This is called "transpiling" — you are not compiling code into a lower level to be run on a computer (like you would say with C code); instead, you are changing it into a syntax that exists at a similar level of abstraction so it can be used in the same way, but in slightly different circumstances (in this case, transforming one flavor of JavaScript into another).

A common transpiler is Babel.js but there are others.

Don't browser sniff

Historically developers used browser sniffing code to detect which browser the user was using, and give them appropriate code to work on that browser.

All browsers have a user-agent string, which identifies what the browser is (version, name, OS, etc.). Many developers implemented bad browser sniffing code and didn't maintain it. This lead to supporting browsers getting locked out of using websites they could easily render. This became so common that browsers started to lie about what browser they were in their user-agent strings (or claim they were all browsers), to get around sniffing code. Browsers also implemented facilities to allow users to change what user-agent string the browser reported when queried with JavaScript. This all made browser sniffing even more error prone, and ultimately pointless.

History of the browser user-agent string by Aaron Andersen provides a useful and amusing take on the history of browser sniffing. Use feature detection (and CSS @supports for CSS feature detection) to reliably detect whether a feature is supported. But doing so, you won't need to change your code when new browser versions come out.

Handling JavaScript prefixes

In the previous article, we included quite a lot of discussion about handling CSS prefixes . Well, new JavaScript implementations used to use prefixes as well, with JavaScript using camel case rather than hyphenation like CSS. For example, if a prefix was being used on a new jshint API object called Object :

• Mozilla would use mozObject
• Chrome/Opera/Safari would use webkitObject
• Microsoft would use msObject

Here's an example, taken from our violent-theremin demo (see source code ), which uses a combination of the Canvas API and the Web Audio API to create a fun (and noisy) drawing tool:

In the case of the Web Audio API, the key entry points to using the API were supported in Chrome/Opera via webkit prefixed versions (they now support the unprefixed versions). The easy way to get around this situation is to create a new version of the objects that are prefixed in some browsers, and make it equal to the non-prefixed version, OR the prefixed version (OR any other prefixed versions that need consideration) — whichever one is supported by the browser currently viewing the site will be used.

Then we use that object to manipulate the API, rather than the original one. In this case we are creating a modified AudioContext constructor, then creating a new audio context instance to use for our Web Audio coding.

This pattern can be applied to just about any prefixed JavaScript feature. JavaScript libraries/polyfills also make use of this kind of code, to abstract browser differences away from the developer as much as possible.

Again, prefixed features were never supposed to be used in production websites — they are subject to change or removal without warning, and cause cross browser issues. If you insist on using prefixed features, make sure you use the right ones. You can look up what browsers require prefixes for different JavaScript/API features on MDN reference pages, and sites like caniuse.com . If you are unsure, you can also find out by doing some testing directly in browsers.

For example, try going into your browser's developer console and start typing

If this feature is supported in your browser, it will autocomplete.

Finding help

There are many other issues you'll encounter with JavaScript; the most important thing to know really is how to find answers online. Consult the HTML and CSS article's Finding help section for our best advice.

So that's JavaScript. Simple huh? Maybe not so simple, but this article should at least give you a start, and some ideas on how to tackle the JavaScript-related problems you will come across.

We explain and teach technology, solve tech problems and help you make gadget buying decisions.

Top 12 Ways to Fix Safari Not Working on iPhone and iPad

Supreeth is passionate about technology and dedicates himself to helping people figure it out. An engineer by education, his understanding of the inner workings of all types of gadgets and devices ensures he provides top-notch guidance, tips, and recommendations to his readers. When away from the desk, you will find him traveling, playing FIFA, or hunting for a good movie.

Apple’s ingenious web browser, Safari, was developed in 2003 and received many praises. However, Google responded with Chrome and many migrated to it as Safari had bugs . Although it has improved a lot over years, sometimes the web browser stops working. If you’re facing this issue, here’re twelve fixes for Safari not working on iPhone and iPad.

Following are some of the most common methods that have worked to troubleshoot Safari. We recommend you try every method, except the Reset iPhone option which should be used as a last resort. We have provided detailed steps for each method, but let us start with the basics.

Why Is Safari Not Working On iPhone and iPad

Safari might not work for a lot of reasons, but the most common issue is the app not being able to connect to the internet. This is probably because you are not connected to a good internet connection, or there are a few misconfigurations on your iPhone settings that are preventing Safari from doing so.

Fortunately, there are a few effective methods to fix the issue. As you start reading the next section of this article, you will find a detailed procedure to fix Safari on your device.

How to Fix Safari Not Working on iPhone and iPad

Below are twelve easy methods to fix Safari. Most of these will resolve the issue within a few steps only, and therefore will not consume a lot of time.

We also came across a lot of users across forums suggesting toggling a few features off/on to fix the issue. So, let us take a look at all of these methods in detail. We can start by simply trying to restart the device

1. Restart iPhone or iPad

Simply trying to restart your device will fix most issues, and it can probably fix Safari not working as well. Here’s how you can restart your iPhone or iPad.

Step 1:  First, shut down your device.

• On iPhone X and above : Press and hold the volume down and the side button.
• On iPhone SE 2nd or 3rd gen, 7, and 8 series : Press and hold the side button.
• On iPhone SE 1st gen, 5s, 5c, or 5 : Hold the power button at the top.
• On iPad : Hold the power button at the top.

Step 2:  Now, drag the power slider to turn off the device.

Step 3:  Next, turn on your device by pressing and holding the power button on your iPhone.

If it’s a software issue, restarting the device should fix your Safari not working issue. If it doesn’t, try tweaking a few settings shown in the next few fixes and see if they help.

2. Turn off Safari Suggestions

We’re not entirely sure how this fixes the issue, but a lot of users reported that doing this restored the functionality of their browser. Here’s how you can turn off Safari Search Suggestions on iPhone or iPad.

Step 1: Open the Settings app and open Safari

Step 2: Toggle off ‘Search Engine Suggestions’.

That is how you can disable Search Engine Suggestions. If the issue persists, you need to check if Safari is limited by any Screen Time settings.

3. Edit Your Screen Time Settings

To provide digital well-being controls to the user, Apple has an option to set a limit to the duration of any app being used. If you’ve enabled Screen Time for Safari , it cannot be used once you exhaust the set limit. Here’s how you can remove the limit to ensure Safari works as usual on iPhone.

Step 1: Open the Settings app and select Screen Time.

Step 2: You need to select App Limits.

Step 3: Safari will show up in this list if there is a limit for it. Tap on it, and select Delete Limit.

This ensures that you do not have any limits set on using Safari. You now need to check if there is a network limit set on Safari.

4. Check Cellular Settings for Safari

If you have turned off cellular data access for Safari, and are trying to use Safari on mobile data, it won’t work. Therefore, you need to remove the restrictions. Here’s how you can do it.

Step 1: Open the Settings app and select Cellular.

Step 2: Scroll down to find Safari. Turn on the toggle to give Safari access to cellular connectivity.

If the issue persists, perhaps it is time you now try and clear all browsing data from Safari.

5. Clear Safari History and Data

If you have been using Safari for a long time, it will accumulate a lot of website data. This can slow down Safari and affect the web browsing performance. Hence, it is a good practice to clear browsing history and cache from Safari every fortnight. Here’s how you can do it.

Step 1: Open the Settings app and select Safari.

Step 2: Tap on ‘Clear History and Website Data’ and select ‘Clear History and Data’ to confirm. This will delete your browsing history, stored cache, cookies, and saved passwords.

6. Check Network Connectivity

As mentioned earlier, a major reason why Safari does not work on iPhone and iPad is due to a lack of connectivity. Here’s how you can ensure that you are connected to a good network on your device.

Step 1: Open the Settings app and select Wi-Fi.

Step 2: Now, check if the Wi-Fi network you are connected to has full strength, and does not show errors like ‘Not Connected to Internet’ or ‘Weak Security’.

If you are operating on mobile data, the connection needs to either be on 4G or 5G running on strong signal strength.

Step 2: Ensure the toggle is on for Cellular Data. Also, ensure that the network is connected to 4G/5G and has a good signal strength.

Step 3: If you can’t connect to a 4G or 5G network despite having a plan for the same, tap on ‘Cellular Data Options’.

Step 4: Now, tap on ‘Voice & Data’. Select 4G or 5G as your default network.

7. Turn Off Hide IP Address From Trackers

The ‘Hide IP Address From Trackers’ option ensures that your IP address is not provided to any browser trackers. To know more, you can read our article on trackers on Safari . However, this causes a few issues that might cause Safari to not work on iPhone and iPad.

Here’s how you can disable this feature.

Step 2: Tap on ‘Hide IP Address’.

Step 3: Select Off, if not already.

Another feature on Safari that might cause a few errors are extensions. Here’s you you can disable them to fix Safari not working on iPhone and iPad.

8. Check Safari Extensions

While Safari extensions on iPhone help expand functionality, not all extensions are stable and some might cause issues with your web browsing experience. Here’s how you can turn off an extension.

Note : The extension we are using to show you the steps is just an example. By no means we are stating that this extension is causing issues.

Step 2: Now, tap on Extensions.

Step 3: Now, select the extension, and toggle it off.

This is how you can turn off extensions to ensure they are not the means of any problem. However, sometimes disabled JavaScript can also affect Safari. Let’s understand this in detail in the next section.

9. Enable JavaScript

JavaScript is a crucial element in websites that enables interactive content. If you disable it, you won’t see any images, videos, or other media content on a website. Thus, it can prevent Safari from responding on iPhone. Here’s how you can turn JavaScript on.

Step 2: Scroll down and tap on Advanced.

Step 3: Ensure to turn on the toggle for JavaScript.

That is how you enable JavaScript and ensure all kinds of websites work fine on Safari. If this does not work too, you need to check if your device is connected to a VPN network and if this prevents Safari to operate normally.

10. Disable VPN

VPN is a private network that hides your IP address while browsing the web. However, if you don’t connect to a VPN using a reliable service, you will face low speeds while browsing on Safari. Therefore, you can turn off the VPN connection.

Step 1: Open the Settings app and select General.

Step 2: Tap on ‘VPN & Device Management’ and ensure that the VPN status remains ‘Not Connected’.

If none of the above methods work, you can try some generic methods that help resolve most issues on iPhone and iPad, you can check if there is any software update for your iPhone.

11. Update Your iPhone and iPad

Apple ensures to fix issues faced by a lot of users through a software update. Therefore, it is best to remain on the latest version of iOS. Here’s how you can do the same.

Step 2: Tap on Software Update and select Download and Install. This will download and install the latest iOS update for your iPhone and iPad.

If this does not work either, you can probably try and reset your iPhone or iPad as a last resort.

12. Reset All Settings

Resetting your iPhone has a good probability of fixing any issue, and it goes the same for Safari not working as well. Here’s how you can Reset your iPhone.

Step 2: Tap on Transfer or Reset.

Step 3: Select Reset.

Step 4: Now, you can select Reset Network Settings to restore all original settings related to the network, i.e Wi-Fi settings, cellular Settings, saved passwords, etc.

If that does not work, you can select Reset All Settings. However, this will restore all your iPhone settings to default. This will not erase any of your data.

Step 5: If this does not work too, you can try to completely erase your iPhone and start afresh. You can tap on the ‘Erase All Content and Settings’ option on the reset page.

Now, follow the on-screen instructions to erase and reset your iPhone. However, since it wipes your phone, we suggest you take a full backup of your iPhone and iPad .

This, as mentioned earlier, should only be tried as a last resort as you’ll have to set up your iPhone or iPad as a new device.

Get Safari Working Again With these methods

That is all you need to know about trying to fix Safari not working on iPhone or iPad. We hope you found these methods helpful. Realistically speaking, it will most probably be an issue with your network connectivity, or from the website’s end. We hope your Safari is up and running soon.

Was this helpful?

Last updated on 28 March, 2023

The above article may contain affiliate links which help support Guiding Tech. However, it does not affect our editorial integrity. The content remains unbiased and authentic.

my safari icon is gone in the settings where it normally is under the facetime icon but mine is gone

Excellent article! Thank you very much!!

Leave a Reply Cancel reply

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

The article above may contain affiliate links which help support Guiding Tech. The content remains unbiased and authentic and will never affect our editorial integrity.

DID YOU KNOW

Supreeth Koundinya

More in ios.

9 Best Fixes for ‘Cannot Send Audio Message At This Time’ Error on iPhone

7 Best Expense Tracker Apps for iPhone and Android

Join the newsletter.

Get Guiding Tech articles delivered to your inbox.

Want to highlight a helpful answer? Upvote!

Did someone help you, or did an answer or User Tip resolve your issue? Upvote by selecting the upvote arrow. Your feedback helps others!  Learn more about when to upvote >

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

Javascript not working in Safari

After upgrading to 10.7.3 and the new Safari (5.1.3) I now am having trouble with javascript not running whil using Safari. This has occurred on several sites including the this very start a new discussion editor, and is exhibited by click on something and nothing happens! I have tried turning on and off various things, re-installing, running permissions, all to no avail. I do not know even how to begin to problem solve this. I just know that I am stuck using Firefox or Chrome for now as they work just fine. Anyone that can provide direction will be much appreciated.

MB Pro 17 inch 2.33 ghz 3 gb Ram, Mac OS X (10.7), Latest versions of all sofware

Posted on Feb 9, 2012 2:23 AM

Posted on Feb 9, 2012 2:29 AM

Hi Rick ...

Java Script or Java... two different things...

From your Safari menu bar click Safari > Preferences then select the Security tab.

Make sure Enable JavaScript and Enable Java are selected.

If you haven't done so yet, install > Java for OS X Lion Update 1

Loading page content

Page content loaded

Feb 9, 2012 2:29 AM in response to Rick Wintheiser

Feb 9, 2012 2:30 AM in response to Carolyn Samit

They were both checked, nothing has changed from the previous version.

Feb 9, 2012 2:32 AM in response to Rick Wintheiser

Try testing your Java here > http://java.com/en/download/testjava.jsp

Feb 9, 2012 2:38 AM in response to Carolyn Samit

Java has always worked, it is javascript that is not.

Feb 9, 2012 2:43 AM in response to Rick Wintheiser

Example, when you reply you are presented with a text edit box. I am using Firefox to type this now. When in Safari the tool does not load and I get the following error message when looking at the web inspector

TypeError: 'undefined' is not a function (evaluating 'n.parentElement()')

Feb 9, 2012 1:10 PM in response to Rick Wintheiser

I installed Better Block Up Blocker for Safari and after uninstalling this all is back to normal. Maybe I did not configure it correctly but there was very few options.

WebKit Features in Safari 17.5

May 13, 2024

by Jen Simmons

Happy May! It’s time for another release of Safari — our third significant update of 2024. With just a month until WWDC24 and the unveiling of what’s coming later this year, we are happy to get these 7 features and 22 bug fixes into the hands of your users today.

There are several exciting new CSS features in Safari 17.5, including text-wrap: balance , the light-dark() color function, and @starting-style , plus the ability to use feature queries with @import rules. Let’s look at how you can put each one to use.

Text wrap balance

On the web, with its flexible container widths, inconsistent lengths of content, and variation between browsers, it can feel impossible to avoid having text wrap in such a way that too few words end up all by themselves on a very short last line.

When type was set by hand, typographers would painstakingly avoid this undesirable result by manually moving content around. Over the decades, web developers have tried a series of different tricks to avoid orphans in CSS, in HTML, in JavaScript, and in content management systems. None work very well. The attempts usually feel hacky, laborious, and fragile.

To solve this and other frustrations, the CSS Working Group has defined three new options that you can use to change how text will wrap. You can switch from default wrapping to another style with text-wrap . WebKit for Safari 17.5 adds support for the first of these new options — balancing.

The text-wrap: balance rule asks the browser to “balance” the lines of text and make them all about the same length.

You can see how now the text no longer fills the containing block — there’s a large amount of space on the right of the words. This is expected, and something you’ll want to think about as you decide when to use text-wrap: balance .

Where exactly each line of text will break when using text-wrap: balance may be slightly different in each browser. The CSS Text level 4 web standard leaves it up to each browser engine team to decide which algorithm they want to use in determining how exactly to wrap balanced text.

It can be computationally expensive for the browser to count characters and balance multiple lines of text, so the standard allows browsers to limit the number of lines that are balanced. Chromium browsers balance 6 or fewer lines, Firefox balances 10 or fewer, while Safari/WebKit balances an unlimited numbers of lines.

For now, Safari does not balance text if it’s surrounding a float or initial letter. And Safari disables the balancer if the content contains preserved tabs or soft hyphens.

Text wrap shorthands and longhands

The text-wrap property is actually a shorthand for two longhand properties: text-wrap-style and text-wrap-mode .

The text-wrap-mode property provides a mechanism for expressing whether or not text should wrap.

The wrap value turns it on, and the nowrap value turns it off, just like the values for white-space . (In fact, text-wrap-mode is the newly introduced longhand of white-space .) WebKit added support for text-wrap-mode: wrap and nowrap in Safari 17.4 .

The text-wrap-style property selects how to wrap. The initial value is auto — asking text to wrap in the way it has for decades. Or, you can choose a value to switch to another “style” of wrapping.

WebKit for Safari 17.5 adds support for text-wrap-style: balance , stable , and auto .

Of course, the text-wrap shorthand is a way to combine text-wrap-mode and text-wrap-style and declare them together. If you write text-wrap: balance it’s the same as text-wrap: wrap balance , meaning: “yes, please wrap, and when you do, please balance the text”.

Full support will eventually include three properties and six values. No browser supports everything yet, so be sure to look up support for the text-wrap , text-wrap-mode , and text-wrap-style properties, as well as the balance , pretty , stable , auto , wrap , and nowrap values.

The balance , pretty , and stable values will simply fall back to auto in browsers without support, so progressive enhancement is easy. You can use these values today, no matter how many of your users don’t yet have a browser with support. They will simply get auto -wrapped text, just like they would if you didn’t use text-wrap . Meanwhile, those users with support will get an extra boost of polish.

Dark mode and the light-dark() color function

More and more, users expect websites and web apps to support dark mode . Since Safari 12.1 , the prefers-color-scheme media query has given you the ability to write code like this:

Or perhaps you’ve used variables to define colors for both light and dark mode at once, making it easier to use them everywhere.

Well, now there’s a new option — the light-dark() function. It makes defining colors for dark mode even easier.

First, inform the browser you are providing a design for both light and dark modes with the color-scheme property. This prompts the browser to switch the default user agent styles when in dark mode, ensuring the form controls appear in dark mode, for example. It’s also required for light-dark() to work correctly.

Then, any time you define a color, you can use the light-dark() function to define the first color for light mode, and the second color for dark mode.

You can still use variables, if you’d like. Perhaps you want to structure your code like this.

An often-asked question when learning about light-dark() is “does this only work for colors?” Yes, this function only works for colors. Use the prefers-color-scheme media query to define the rest of your color-scheme dependent styles.

Starting style

WebKit for Safari 17.5 adds support for @starting-style . It lets you define starting values for a particular element. This is needed to enable a transition when the element’s box is created (or re-created).

In the above example, the background-color will transition from transparent to green when the element is added to the document.

Many developers are excited to use @starting-style along with display: none interpolation. To do so, WebKit also needs to support animation of the display property, which has not yet shipped in Safari. You can test this use case today in Safari Technology Preview .

Features queries for importing CSS

WebKit for Safari 17.5 adds the supports() syntax to @import rules. Now you can conditionally import CSS files based on whether or not there’s support for a certain feature.

For example, you could load different stylesheets based on whether or not CSS Nesting is supported .

Or you could load certain CSS files when a browser does not have support for Cascade Layers . (Note that any @import rules with layer() will automatically be ignored in a browser without layer support.)

Or simply test for a feature. Here, these layout styles will only be loaded if Subgrid is supported .

WebKit for Safari 17.5 adds support for AV1 to WebCodecs when an AV1 hardware decoder is available.

WebKit for Safari 17.5 adds WebGL support for EXT_conservative_depth and NV_shader_noperspective_interpolation .

WKWebView adds support for logging MarketplaceKit errors to the JavaScript console. This will make errors easier to debug.

Bug Fixes and more

In addition to these new features, WebKit for Safari 17.5 includes work polishing existing features.

Accessibility

• Fixed a bug preventing VoiceOver word echoing in some text fields. (122451549) (FB13592798)
• Fixed flickering with multiple accelerated animations and direction changes. (117815004)

Authentication

• Fixed excludeCredentials property being ignored during a passkey registration request. (124405037)
• Fixed the proximity calculation for implicit @scope . (124640124)
• Fixed the Grid track sizing algorithm logical height computation avoid unnecessary grid item updates. (124713418)
• Fixed any @scope limit making the element out of scope. (124956673)
• Fixed native text fields becoming invisible in dark mode. (123658326)
• Fixed fallback native <select> rendering in dark mode. (123845293)
• Fixed scrolling for an element when a video element with pointer-events: none is placed over it. (118936715)
• Fixed HTML5 <audio> playback to continue to the next media activity when in the background. (121268089) (FB13551577)
• Fixed AV1 to decode in hardware on iPhone 15 Pro. (121924090)
• Fixed audio distortion over internal speakers when streaming content in web browsers. (122590884)
• Fixed firing loadeddata events for <audio> and <video> on page load. (124079735) (FB13675360)
• Fixed adjusting the size of the scrollable area when changing betwen non-overlay and overlay scrollbars. (117507268)
• Fixed flickering when showing a layer on a painted background for the first time by avoiding async image decoding. (117533495)
• Fixed line breaking before or between ruby sequences. (122663646)
• Fixed mousemove events in an iframe when the mouse is clicked from outside the iframe and then moves into it while the button is held down. (120540148) (FB13517196)
• Fixed several issues that caused Web Push to not show notifications when the web app or Safari was not already running. (124075358)

Web Inspector

• Fixed info and debug buttons not appearing in the Console Tab until new console messages are displayed. (122923625)
• Fixed WebCodecs to correctly use the VP9 hardware decoder. (123475343)
• Fixed no incoming video in Teams VA. (124406255)
• Fixed the camera pausing occasionally when torch is enabled. (124434403)

Updating to Safari 17.5

Safari 17.5 is available on iOS 17.5 , iPadOS 17.5 , macOS Sonoma 14.5 , macOS Ventura, macOS Monterey and in visionOS 1.2.

If you are running macOS Ventura or macOS Monterey, you can update Safari by itself, without updating macOS. On macOS Ventura, go to  > System Settings > General > Software Update and click “More info…” under Updates Available.

To get the latest version of Safari on iPhone, iPad, or Apple Vision Pro, go to Settings > General > Software Update, and tap to update.

We love hearing from you. To share your thoughts on Safari 17.5, find us on Mastodon at @[email protected] and @[email protected] . Or send a reply on X to @webkit . You can also follow WebKit on LinkedIn . If you run into any issues, we welcome your feedback on Safari UI, or your WebKit bug report about web technologies or Web Inspector. Filing issues really does make a difference.

Download the latest Safari Technology Preview on macOS to stay at the forefront of the web platform and to use the latest Web Inspector features.

You can also find this information in the Safari 17.5 release notes .

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.