ios safari hover stuck

Fixing the iPhone CSS hover problem on iOS

Mobile phones don’t have a mouse, your greasy fat touchy fingers have to do the job, they kinda act like a giant mouse.

There is major difference: a mouse can click, drag and hover above the screen, while your fingers can click and swipe, but not hover. Well they can, but nothing is happening then. 🙂

The official terms here are: mouse-events, touch events, and pointer events, for both mouse and touch events. So touch events don’t know about hover, cause that is a mouse event.

So those nice old style CSS-only dropdown menu’s won’t work on your phone, because the depend on :hover.

Hover events work on mobile Android or Firefox browsers, as those browser vendors looked for compatibility, and made a click with your fingers act like hover on elements that are not a link. That is smart thinking, and good care for compatibility. Keep old sites working. Keep sites accessible without forcing Javascript.

But they don’t work on iPhone or mobile Safari, so we need a solution for that.

Plain HTML is and has always been responsive . It’s the CSS that destroyed it, by setting explicit width. Well there was no max-width, so designers had not much choice. But remove all CSS and magically your HTML will be responsive, except for tables and large images, but at least you can scroll them into sight so everything is still accessible.

Pity the Apple people. An iPhone with mobile Safari doesn’t do :hover , breaking compatibility for old sites, and forcing webdevelopers to use `Javascript` for these trivial things. Annoying.

There are examples on the internet how to fix that, like adding an onclick attribute to every element you want the :hover rule for, but that’s adding a lot of code, and the elements the don’t hide again when you click somewhere else.

We need better solutions!

How to make :hover work on Safari iOS on iPhones and iPads.

Here are a few very simple options, that I came up with having a new iPhone 11 around for a couple of days. Tested on the latest iOS 13.

1. Add a onclick attribute to the body

This miraculously makes the CSS rule :hover work on other elements. Don’t ask me the logic. Simple and short. You could also use ontouchend , ontouchstart or ontouchmove .

2. Add a ontouchmove attribute to the html element

This also miraculously makes the CSS rule :hover work on other elements in the body. You could also use ontouchend , ontouchstart or ontouchmove .

3. Add a tabIndex attribute to the body

This also makes the CSS rule `hover` work, also simple, and it is the only one that works when users have disabled Javascript . ( Which really improves privacy, security, speed, and battery life and saves tons of MB’s. )

4. Add a small javascript in the document head:

Adding a Javascript listener to the document, also makes :hover work. Doesn’t matter which type, as long you’re using a click or any mouse-event: touchstart , touchend or touchmove

From all solutions <html ontouchmove > is the most poetic. A piece of code that keeps the internet moving on the touchscreens of you’re iPhone or iPad. This small piece of code is a giant leap for accessibility .

But solution 3 is the one to go for. In the end we shouldn’t force Javascript on users, do we? And it’s according to the specs.

Please let me know if this works for you. And please add a comment if it doesn’t work!

Tags: iphone ios

This entry was posted on Wednesday, November 6th, 2019 at 5:59 pm and is filed under browser , CSS3 , HTML5 , mobile , Webtechnology . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response , or trackback from your own site.

13 Responses to “Fixing the iPhone CSS hover problem on iOS”

Wow, this is a simple solution. It works on my iPhone, have you tested it on other phones?

@Matt, Nope. Just on the latest iPhone 11.

Hey. I was running into a problem with hover. I added the onclick and it works. You just answered my problem after 30 minutes of searching. Hats off to you. THANKS!

a) THANK YOU very much for documenting these solutions!

b) ONLY #4 allows me to TURN-OFF the hover by tapping on a non-hover portion of the screen. The other 3 all leave my page in a state with something hovered.

@Jim, which iOS version do you use? I don’t have that problem.

Unfortunately not all Apples taste the same. Apple has fragmentation, like Android. It behaves different on a modern iPhone with iOS 13 than on an older iPad Mini.

I tried it on an older iPad Mini, and it wasn’t working with JavaScript disabled, which is the main goal (HTML/CSS solution).

How if we dont want hover to work on iOS devices,Since its taking a double click on iOS devices to open a link or select a color etc. Can you please help me with that

I am iOS 13.5 (not 13.5.x) on both my iPhone (iPhone 11 Max Pro) and my iPad (Original 9.7″ iPad Pro)

tabindex has a strong use for accessibility, isn’t it going to mess up the tab navigation and screen reader use ?

is it working with tabindex=-1 ?

Worked on W10 with Firefox, worked with Chrome and Edge. Worked on Samsung Galaxy 10, even worked with Safari on desktops – but not on mobile Safari. But fixed it! Don’t know how it does it (!), but congratulations and many thanks.

I’m on iOS 14.5.1 and it still works. I think the explanation is quite simple: “ontouchmove” activates a touch latency to separate tapping events from moving/scrolling events. So a short touch is a tapping (=click) and a slighly longer touch is the start of a moving event, which includes a short hovering event, before the dragging begins. But since the absence of force touch a longer press brings up the contextual menus of iOS, which breaks your hack at a certain point.

Thank you for this post! I had this problem with my website only on iOS. The website has a button that would trigger a slide-in menu on hover or short-press using Windows, Android, and even iPadOS. But an iPhone user needed to long-press.

I used your Solution #2: insertion of the ontouchmove attribute to the element. As you wrote, it “miraculously” worked!

You saved me a lot of work because initially, I thought I was going to have to re-write the CSS or resort to Javascript. Thank you and happy holidays!

Hi Felix, glad my blog-post helped.

Name (required)

Mail (will not be published) (required)

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

This blog is maintained by the Dutch Amsterdam based firm Webonomic .

Most posts are written by Webonomics badly-shaven ill-dressed, but bright-eyed and bushy-tailed main developer on a Friday casual Friday afternoon and posted a few months later.

Search for: search

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

Notifications

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

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

Already on GitHub? Sign in to your account

iOS: Elements' hover state gets stuck after tapping them #424

lehnerpat commented Aug 13, 2017

👍 1 reaction
❤️ 1 reaction

mikehenrty commented Sep 27, 2017

Sorry, something went wrong.

lehnerpat commented Sep 27, 2017

HackerSajeed commented Oct 2, 2018

👍 2 reactions

SahilMepani commented May 14, 2019

gustavneustadt commented Oct 29, 2019 • edited

👍 4 reactions

No branches or pull requests

iOS has a :hover problem

Posted at July 5, 2012 by Nicholas C. Zakas

Tags: CSS , Hover , iOS , Mobile

Recently, I got my first iPad. I’ve had an iPhone since last year, and had gotten used to viewing the mobile specific view of most websites. When I got the iPad, it was my first time experiencing desktop webpages using a touch interface. Generally, the transition was easy. I just tapped on links I wanted to navigate to. Although sometimes they hit target seemed a little bit too small, I would just zoom in and tap away. Then I started noticing something: on certain links it was taking two taps instead of one to navigate. Most worrisome to me, personally, was that I noticed this on the WellFurnished home page. Of course, I had to dig in and figure out what was happening.

:hover exists everywhere

One of the things we’ve been told and I’ve repeated over and over again is that touch devices have no concept of hover. On a desktop with a mouse, you can move the pointer over an area of the screen and it can detect that to create a visual cue. That doesn’t mean you have activated that particular part of the screen, it’s just a visual indication that this part of the screen is “alive”.

Naturally, with a touch device, there really isn’t a lingering pointer. Designers who have relied on hover states to show functionality all of a sudden had unusable interfaces. This was one of the trends I fought hard against while I was at Yahoo: making sure that important functionality wasn’t displayed only on hover. It’s a clear accessibility issue for people who are not using a mouse.

So it goes without saying that most developers expect touch devices to simply ignore CSS rules containing :hover . That’s a logical assumption to make because, once again, there’s no such thing as a hover on a touch device. Except when there is.

This is where the people at Apple might have been a bit too smart. They realized that there was a lot of functionality on the web relying on hover states and so they figured out a way to deal with that in Safari for iOS. When you touch an item on a webpage, it first triggers a hover state and then triggers the “click”. The end result is that you end up seeing styles applied using :hover for a second before the click interaction happens. It’s a little startling, but it does work. So Safari on iOS very much cares about your styles that have :hover in the selector. They aren’t simply ignored.

No double taps

When I started experiencing the double tap behavior, I was noticing what appeared to be a hover state being shown after the first. Immediately I started looking at all the rules containing :hover . If I removed those rules, then the link worked with one tap. As soon as I added the rules back in, I was back to having the double tap. Clearly, this had something to do with how :hover is handled by Safari in iOS.

My first step was to create a simple example to see if I could reproduce it. I started out with a link that had a hover state:

When I tried that, the link worked with one tap and I saw the color change briefly before navigating.

My next idea was that it might be a link inside of a container that had a :hover rule and came up with another example:

Once again, the link navigated with a single tap after displaying the change in color. I decided to go back to my original code and look at it more carefully. That’s when I noticed a slight difference between my test cases and the real world use case.

Double tap!

The culprit, as it turns out, is a combination of two factors. It’s not simply a :hover rule that triggers the double tap behavior. It’s a :hover Rule that either hides or shows another element using visibility or display . For example:

It seems that the good people at Apple were very concerned about controls being hidden and only displayed on hover in webpages. Whenever you run into this situation, where an element is initially hidden and then displayed on hover, you will run into the double tap issue. The first tab will display the change in element and the second tap will navigate. If you then tap somewhere else on the screen, the :hover rule is no longer applied and you need to start the sequence over again.

You can try this all for yourself using this test page .

I went on and tried several other CSS properties and the only ones to trigger this behavior are visibility and display .

Possible workarounds

Shortly after originally posting this article, a couple of people on twitter gave some good suggestions for working around this issue area. Jacob Smartwood pointed out 1 that Modernizr provides a no-touch CSS class that indicates the browser doesn’t support touch. In that case, you can just make sure that all of your :hover rules are preceded by .no-touch , such as:

This works although it has the side effect of changing the specificity of the rule. In some cases this might not matter, but in others it might be important.

Oscar Godson pointed out 2 that touch can be detected in JavaScript with a simple piece of code, allowing you to implement your own Modernizr-like solution:

The mysterious double tap issue is caused by a :hover rule that changes the visibility or display properties of an element on the page. Changing any other property still allows a single tap to navigate to a link. I was only able to test this on iOS 5, as both my iPhone and iPad have it installed. Mobile Safari as well as any apps using the UIWebView (including Chrome) are affected. The Kindle Fire doesn’t exhibit this behavior at all. I would love to hear from others using other devices to see if any other browsers exhibit this behavior.

So don’t believe people when they tell you that hover doesn’t exist on touch devices. At least on iOS, hover does exist and needs to be planned for accordingly. If you are using a :hover rule to show something in your interface, you may want to hide that rule when serving your page to a touch device. It might be a good idea to just completely remove all :hover rules for any experience that’s going to be served to a touch device. The touch-based world doesn’t need hover, so be careful not to inject it accidentally.

Update (5-July-2012) – added possible workarounds that were mentioned on Twitter.

Jacob Smartwood’s tweet
Oscar Godson’s tweet

Free E-book!

Managing Your Interrupt Rate as a Tech Lead E-book Cover

Take control of your calendar to get more done! The popular blog post series plus frequently asked questions all in one convenient PDF.

Download the Free E-book!

Managing Your Interrupt Rate as a Tech Lead is a free download that arrives in minutes.

Additional Information

Recent Snippets

Publishing to JSR using release-please
How to setup a known_hosts file for a Jenkins pipeline job
Mimicking __dirname and __filename in ESM modules in Node.js
How to add npm packages for client-side use in Eleventy
Creating a new user with an SSH key on Linux
How to setup and deploy a web application on Dokku
How to regain Jenkins web access after being locked out
Create TypeScript declarations from JavaScript and JSDoc
How to read environment variables in Deno using JavaScript
How to validate the signature of a GitHub webhook using Node.js

Archives (20 Years)

Hakeem Almidan

How to prevent css hover state from getting stuck on mobile browsers.

The CSS hover state often gets stuck on mobile (touch screen) browsers. It would be something like this:

Hover state getting stuck on-click on mobile

Using the ‘hover’ CSS media query , which could be applied either through SCSS or CSS. In the case of SCSS, we’re going to use a mixin .

Here is each solution respectively:

Option 1: SCSS Mixin

Example use:

Option 2: CSS

Explanation.

Both examples change the background-color of HTML elements with class example only when they’re hovered-over on non-touch screen devices (or any hover supported device). In short, this applies hover styling on only non-touch screen devices .

PS: I’m not sure how this would act on touch-screen laptops.

Like what you're seeing? Subscribe below to recieve notifications of new posts ⬇️

Promise not to send more than 1 email per month (not counting subscription confirmation email) 👨‍💻

Updated: 1 January, 2021 Created: 16 April, 2020

Common-voice: iOS: Elements' hover state gets stuck after tapping them

Unlike desktop browsers, Safari on iOS does not handle the CSS :hover state well.

In particular, the hover state is applied when tapping an element, and is left applied until another element gets focus.

One solution is to not use :hover on iOS, but :active instead. The :active style is applied as one would expect - only while the finger is down during a tap, and removed when the tap is released.

Unfortunately, this requires some form of platform detection to distinguish the platforms/browsers and apply the appropriate CSS. From a quick look, though, it seems a CSS class safari is already applied when loading the page on iOS. However, I have not counter-checked if this class is also applied on macOS (in which case, a more fine-grained distinction would be needed).

This is easy to reproduce - just open the page on iOS and tap the "play" button - its hover state is not unapplied until you tap something else. (This also works in Chrome's mobile/responsive device simulator. I've not tried it in Firefox's inspector.) If desired, I can attach a short screen recording demonstrating the issue (a hint for where to host the video would be appreciated, GitHub doesn't allow attaching video files directly; elsewise, I'd just zip the file).

I'd be happy to help fixing this (or starting to, depending on how complex the stylesheets are), but first I'd like to clarify what approach to platform/browser detection is used or wanted in this project.

Or if this is considered too cosmetic and not something that should be fixed at the moment?

Most helpful comment

### Use the following jQuery On Hover - Works on ios Hover Off - Doesn't seem to work on iOS

$(document).ready(function(){ $("_.element_").hover(function(){ $("p").hide(); // for hover off }, function(){ $("p").show(); }) });

All 5 comments

I agree with your assessment @nevik and thank you for the detail.

We do have a way of detecting if we are in Safari, and if we are in the iOS native app, but not Safari mobile browser. For the iOS native app, we add a class of ios to the body element. https://github.com/mozilla/voice-web/blob/4a3742e642a1a5e092037dd80d14fa66dedd80cf/web/src/lib/app.tsx#L100

For now, I think fixing this for the iOS native app would be enough, so you can use the .ios class to fix this. But if you are really concerned about this, we could add a user agent string detection function into `web/src/lib/utility.ts' to check for mobile safari.

Thanks for the info @mikehenrty!

I’ll probably take a stab at this on the weekend :)

We can use mordernizr to check whether the device supports touchevents and no-touchevents and accordingly we can set hover and active styles.

You can use @media (hover:hover) now to only address devices that are able to hover over elements. hover CSS media feature

```css @media (hover:hover) { button:hover { background: green; } }

Related issues

Debug Wordle
Book a Demo
Start For Free

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

iOS: Elements' hover state gets stuck after tapping them

Unlike desktop browsers, Safari on iOS does not handle the CSS :hover state well.

In particular, the hover state is applied when tapping an element, and is left applied until another element gets focus.

One solution is to not use :hover on iOS, but :active instead. The :active style is applied as one would expect - only while the finger is down during a tap, and removed when the tap is released.

This is easy to reproduce - just open the page on iOS and tap the “play” button - its hover state is not unapplied until you tap something else. (This also works in Chrome’s mobile/responsive device simulator. I’ve not tried it in Firefox’s inspector.) If desired, I can attach a short screen recording demonstrating the issue (a hint for where to host the video would be appreciated, GitHub doesn’t allow attaching video files directly; elsewise, I’d just zip the file).

I’d be happy to help fixing this (or starting to, depending on how complex the stylesheets are), but first I’d like to clarify what approach to platform/browser detection is used or wanted in this project.

Or if this is considered too cosmetic and not something that should be fixed at the moment?

Issue Analytics

Created 6 years ago
Reactions: 2
Comments: 5 (2 by maintainers)

Top GitHub Comments

You can use @media (hover:hover) now to only address devices that are able to hover over elements. hover CSS media feature

### Use the following jQuery On Hover - Works on ios Hover Off - Doesn’t seem to work on iOS

$(document).ready(function(){ $(“ .element ”).hover(function(){ $(“p”).hide(); // for hover off }, function(){ $(“p”).show(); }) });

Top Results From Across the Web

Top related medium post, top related stackoverflow question, troubleshoot live code, top related reddit thread, top related hackernoon post, top related tweet, top related dev.to post, top related hashnode post, switch from npm to yarn to allow cross-platform sharing of lockfile, collect and document contribution guidelines.

Css hover not working on IOS/mobile

so i have this page http://www.mcsuk.org/support_mcs.php/Join+Donate+Adopt/Join+MCS/Join+MCS and if you hover the large images it changes to give you more info and a link. Trouble is on an ipad and iphone the hover doesn’t work. My Microsoft phone and Android phones work fine.

This is the CSS i’ve applied

I’ve just added the Focus and Active as i read that should fix it most of the time but it doesn’t seem to have. Is there a way of re-writing it to work without adding JS etc.

think i’ve sorted it now. I don’t see it as a pretty fix but it seem to work. https://css-tricks.com/forums/topic/click-function-for-hover-states-on-touch-devices/page/2/

So for the container div i added onclick="void(0)" and that seems to work on the old ipad i’m using for testing.

If there is a pure css way it would be nice but at least people can click through at the moment as far as i can tell.

Hover is a bit tricky on devices as they all handle it a different way as there is not really a hover on touch. Some devices treat a first touch as a hover and a second touch will activate the link but usually (not always) this is only applied to anchors.

There are various fixes but the simplest is the empty onclick method you are using.

If you really want a hover effect that only stays while the element is touched then you will need js and and do it like this . The js adds a class to the element when touched and removes it on touchend. Its the class that creates the hover effect and not :hover. Unlike the click method you are never stuck with an element being in the hover state.

However, I don’t think the above method would be any benefit to you as you want the link on the hover element to be clicked and that is a little tricky with the method above.

cool thanks. Seems like i’ve probably done it the best way for now then. Will stick with it then.

Three Ways to Fix a Safari Browser Hijack in iOS 11

Page 2 – How to Fix a Safari Hijack in iOS 11

Dealing with browser hijacks in ios.

iOS is well built, and there aren’t any known vectors for actually taking over your iPhone or iPad in Apple’s mobile OS. What these asshats are doing is using JavaScript to effectively block functionality in Safari. The three methods I outline below are easy workarounds, starting with clearing your browser cache.

With this method, we’ll force quit Safari and then clear some or all of your cache to delete the offending webpage.

Step 1: Force Quit Safari. In iOS 11 on iPhone 8/Plus and earlier, as well as iPad, double tap the Home Button to bring up the App Switcher. Swipe up on Safari to Force Quit.

In iOS 11 on iPhone X, swipe up from the bottom of the screen and hold (or, swipe up and to the left in an arc) to bring up the App Switcher. Tap and hold on an app until the red circles with a minus sign appears. Tap the minus sign on Safari to Force Quit the app.

Step 2: Go to Settings > Safari > Clear History and Website Data > Clear History and Data, as shown below. This will erase the cache for Safari on this device— AND every other device that syncs Safari through iCloud—erasing the problematic webpage from your device.

You may be given the option of just erasing data from the last hour. This is a great option if you don’t want to lose the rest of your web cache. I used that option when dealing with my encounter, but didn’t have it when taking screenshots for this article.

This will solve most browser hijacks in iOS 11. When you open up Safari again, the offending page will be gone and you’ll be free to user your device normally.

Two Methods for Dealing with More Pernicious Browser Hijacks

Sometimes, though, the scumbags get a little more clever, and clearing your data alone doesn’t work. Don’t ask me how that’s possible, but I found the two methods below when helping someone with just this problem.

If clearing your history and data doesn’t work, you can try turning off JavaScript. To do so, first Force Quit Safari as described above. This might not be necessary, but it’s better to be thorough and cover all your bases. Then, go to Settings > Safari > Advanced, and tap the JavaScript toggle until its off, as shown below.

Advanced Safari Settings in iOS 11

Relaunch Safari and you should be able to close the offending tab. You may also want to clear your History and Data, as described above. You can then turn JavaScript back on, as many useful and legitimate features on webpages use it.

Using an External Link to Bypass a Browser Hijack

There’s yet one more method for bypassing a hijacked browser window in Safari in iOS 11, and that’s to open a new window by tapping on a link in another app. You can do this any number of ways. For instance, having a friend send you a URL in iMessage. In a pinch, you can send the URL yourself to a friend in iMessage. Once it’s in a chat, you can tap it no matter who sent it.

If you already have a link someone sent you, use that, be it in iMessage, Mail, a Note, or anywhere else. The object here is to send the URL to Safari, which will open it in a new window, despite the browser hijack. Here’s an example:

Once you tap it and head back to Safari, it will open the new window. You can then go to the tab browser in Safari and swipe the offending webpage away.

In the case where I helped a friend, the malicious page would reassert itself on top of the new tab. It was a really well-crafted piece of scummery. She had only a split second to tap the tab switcher, and it took several tries. In the end, however, we won and the scumbags were defeated.

Hopefully these steps will help you beat the bad guys, too.

3 thoughts on “ Three Ways to Fix a Safari Browser Hijack in iOS 11 ”

This didn’t help me at all, on my iPad. Still getting hijacked with regularity. What I mean is, even with JavaScript disabled, I get hijacked, bu at least can go back to the page. Problem is the sites where this is happening are useless without JavaScript. Amazed the hell out of me that I cannot blacklist sites in safari, or even chrome on iPad, I would need to use a wildcard as they change it but my tormenter begins with eu.*.out or something like that. Wild card in place of the field that changes each time. This is making browsing unusuable. One of the sites is huffingtonpost and they are basically unreachable anyway.

Sorry but this is just the ad network being weaponized. I will make a few repeat visits to sites where this happens and notify the site, but if it persists more than a couple of visits, that’s it, I’m blacklisting you. In general this is among the reasons “we can’t have nice things”, but that is the world we live in. If ad networks can’t fix this problem quickly, it will be the well-deserved end of them.

This happens to me at a few website that I regulalry visit. I will report to the webmaster who will investigate and 86 the ad, but a few days later the slimeball is at it again.

Maybe the answer would be for website to not allow advertisers to use javascript in the ads, just a simple link. It would probably speed up the page load.

Tips & Tricks

Troubleshooting, subscribe to osxdaily.

- How to Connect AirPods to a Smart TV
- How to Customize the Finder Sidebar on Mac
- How to Uninstall Apps on MacOS Sonoma & Ventura via System Settings
- How to Mute a Call on Apple Watch
- How to Use the Latest GPT 4 & DALL-E 3 Free on iPhone & iPad with Copilot
- Beta 3 of iOS 17.5, macOS Sonoma 14.5, iPadOS 17.5, Available for Testing
- Apple Event Set for May 7, New iPads Expected
- Beta 2 of iOS 17.5, iPadOS 17.5, macOS Sonoma 14.5, Available for Testing
- Opinion: Shiny Keys on MacBook Air & Pro Are Ugly and Shouldn’t Happen
- MacOS Ventura 13.6.6 & Safari 17.4.1 Update Available

iPhone / iPad

- How to Bulk Image Edit on iPhone & iPad wth Copy & Paste Edits to Photos
- What Does the Bell with Line Through It Mean in Messages? Bell Icon on iPhone, iPad, & Mac Explained
- iOS 16.7.7 & iPadOS 16.7.7 Released for Older iPhone & iPad Models
- Fix a Repeating “Trust This Computer” Alert on iPhone & iPad
- Make a Website Your Mac Wallpaper with Plash
- 15 Mail Keyboard Shortcuts for Mac
- How to Use Hover Text on Mac to Magnify On-Screen Text
- Fix “warning: unable to access /Users/Name/.config/git/attributes Permission Denied” Errors
- How to Fix the Apple Watch Squiggly Charging Cable Screen
- NewsToday2: What it is & How to Disable NewsToday2 on Mac

Shop on Amazon to help support this site

Safari Crashing on iPhone / iPad? Here is How to Fix Safari Crashes & Freezes

Safari is the web browser that comes with every iPhone, iPad, and iPod touch, and though Safari in iOS should be stable and not crash or freeze often, the fact is that sometimes Safari does crash.

Fortunately there are usually some pretty simple resolutions to any Safari crashing problems in iOS, and so if you are experiencing any type of freezes, crashes, or the app closing itself or stalling, you can likely resolve it with the methods outlined below.

6 Fixes for Safari Crashes in iOS

While you can try these in any particular order to fix Safari problems in iOS, we recommend following how they’re presented here. Let’s get right to it:

Update iOS System Software

Updating system software is recommended because each iOS release includes bug fixes and improvements, some of which may directly resolve a problem you are experiencing with the Safari app on an iPhone or iPad. Updating iOS is easy.

Go the Settings app and to “General”, then go to “Software Update” and install what is available

Download and install latest iOS software update

Disable Safari Suggestions Features

An old bug that was fixed in later releases of iOS caused Safari Suggestions to be problematic in the past. Some users also just don’t like the feature, but you can disable Safari suggestions easily:

From Settings, go to “Safari” and toggle “Search Engine Suggestions” OFF, then toggle “Safari Suggestions” OFF

Too Many Safari Tabs? Close Some

If you have too many Safari tabs open you may be causing the app to run out of memory. Typically Safari handles this well by forcing the pages to refresh, but sometimes you may want to manually intervene and just close out some of the old unused tabs.

From Safari, tap the box button to see the open tabs, then tap the “X” in the tab titlebar to close each – repeat as necessary

Clear Out History & Web Data in Safari

Safari accumulates caches, browsing history, cookies, and other data in the iPhone or iPad. Sometimes that data can interfere with app functionality, so clearing it out can be a remedy to problems with the app crashing or stalling on some web sites.

From Settings, go to “Safari” and then to “Clear History and Website Data”

This will also delete history from you rather iCloud signed in devices so keep that in mind too. You can get more specific and delete recent Safari history if you want instead, though that may not remedy the issue.

Force Quit the Safari App in iOS, Relaunch

Sometimes just force quitting the app and relaunching Safari is sufficient to resolve a problem with the browser:

Double click on the Home button, then swipe UP on the Safari app to close it, relaunch as usual

Reboot the iPhone / iPad

Hold down the Home button and Power button together concurrently until you see the Apple logo on the front of the screen, then release. This force reboots the iPhone and can resolve some issues.

Have another solution to Safari crashing on an iPhone or iPad? Let us know!

About OSXDaily | Contact Us | Privacy Policy | Sitemap

This website is unrelated to Apple Inc

All trademarks and copyrights on this website are property of their respective owners.

Skip to primary navigation
Skip to main content
Skip to primary sidebar

Technology Simplified.

Fix: Safari Browser Stuck on iPhone or iPad

By: Waseem Patwegar | Filed Under: iOS

The default Safari browser can sometimes freeze, get stuck or crash on iPhone or iPad. You can find below the steps to Fix Stuck Safari browser on iPhone or iPad.

Stuck Safari Browser on iPhone or iPad

The problem of Safari browser getting stuck, freezing, hanging, crashing or becoming totally unresponsive on iPhone has been reported by users.

This issue can be caused by a variety of reasons, ranging from Safari browser Cache being clogged up with outdated files, temporary glitches in iCloud to certain Safari features not functioning properly on your iPhone.

1. Restart iPhone or iPad

The problem could be due to a stuck file or processes preventing the Safari browser from working properly on your iPhone.

Go to Settings > General > scroll down and tap on Shut Down . On the next screen, use the Slider to Power OFF iPhone.

Wait for 30 seconds and press the Power button to Restart iPhone.

2. Enable/Disable Airplane Mode

Enabling/Disabling Airplane Mode resets the wireless antennas on your device and helps in fixing network connectivity problems.

Open Settings and move the slider next to Airplane Mode to ON position.

After 15 seconds, disable Airplane Mode by moving the toggle to OFF position.

Now, try to use the Safari browser on your iPhone and see if you are able to browse normally.

3. Clear Safari History & Website Data

The most common reason for Stuck Safari Browser on iPhone is due to the Safari Cache being clogged up with outdates files.

Go to Settings > Safari > scroll down and tap on Clear History and Website Data option, located under “Privacy and Security” section.

Clear History and Website Data option in iPhone Safari

On the confirmation pop-up, select Clear History and Data option to confirm.

Once Safari Cache is cleared, you should be able to browse normally using the Safari browser on your iPhone.

4. Update Safari Browser

Apple Updates Safari browser along with its regular iOS updates. Hence, make sure that you are using the latest version of iOS on your device.

Go to Settings > General > Software Update > On the next screen, tap on Download and Install (If an iOS update is available).

Download and Install Software Update on iPhone

Patiently wait for the iOS update to be download to your device. Once the download is complete, install the update by tapping on Install Now option.

5. Disable Safari Suggestions

Go to Settings > Safari > On the next screen, disable Safari Suggestions and Search Engine Suggestions by moving the toggle to OFF position.

Disable Safari and Search Engine Suggestions on iPhone

Now, see if Safari browser is loading properly on your iPhone.

6. Disable Autofill

Go to Settings > Safari > Autofill > On the next screen, move the slider next to Use Contact Info and Credit Cards to OFF position.

7. Disable iCloud Safari Syncing

If you are still unable to fix Stuck Safari Browser using above methods, the problem could be due to iCloud.

Open Settings > tap on your Apple ID Name > iCloud > On the next screen, move the toggle next to Safari to OFF position.

Disable Safari Syncing to iCloud on iPhone

Now, open Safari browser and you should be able to browser normally.

Clear History Option Grayed Out in Safari On iPhone
Fix For Safari Browser Stuck on Mac

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

Stuck on floating keyboard in safari

. The pinch out isn’t working I’m using stage manager with iOS 16.2. It only happens in safari. And edition at the bottom of the screen is a little pop-up with undo keyboard to hide keyboard or pencil settings scroll up, scroll down arrows microphone and enter button. I can’t figure out how to get a full-size keyboard when using safari.

iPad Pro 11-inch Wi-Fi

Posted on Jan 21, 2023 1:10 PM