The functionality of the anchor tag is not supported by the Safari browser on iPhone devices

Question

The functionality of the anchor tag is not supported by the Safari browser on iPhone devices

Having some trouble with a named anchor tag in the iPhone Safari browser. It's functioning properly in desktop browsers, including Safari, but not working on mobile Safari. Odd!

For instance, my URL appears as:

http://www.example.com/my-example-article-url-is-like.php#articlebottom

The above URL is from a newsletter and it should take me to the bottom paragraph of the article page where I've assigned an id like this:

<p id="articlebottom">paragraph goes here</p>

When I click the URL from the newsletter, I'm taken to the article page, but not to the designated bottom paragraph with the specified id. Strangely, I noticed that the #articlebottom part is missing from the URL when it reaches the targeted page in Safari.

Any insights would be greatly appreciated!

html css iphone mobile-safari anchor

Answer 1

Answer №1

When navigating from one page to another, Opera, IE, Chrome and Firefox will maintain the anchor link. However, Safari tends to lose the anchor during redirection.

One workaround is to insert a forward slash just before the ID Tag:

Original URL Path:

http://www.example.com/my-example-article-url-is-like.php#articlebottom

New URL Path:

http://www.example.com/my-example-article-url-is-like.php/#articlebottom

Alternatively, you can remove "www." from the domain and include a slash before the anchor tag in the URL/path for Safari to function correctly. Firefox doesn't seem to be affected, while testing on IE is still pending.

Answer 2

When navigating from one page to another, Opera, IE, Chrome and Firefox will maintain the anchor link. However, Safari tends to lose the anchor during redirection.

One workaround is to insert a forward slash just before the ID Tag:

Original URL Path:

http://www.example.com/my-example-article-url-is-like.php#articlebottom

New URL Path:

http://www.example.com/my-example-article-url-is-like.php/#articlebottom

Alternatively, you can remove "www." from the domain and include a slash before the anchor tag in the URL/path for Safari to function correctly. Firefox doesn't seem to be affected, while testing on IE is still pending.

Answer 3

Answer №2

For those facing issues with Index navigation links on a Squarespace page and Safari on iOS, I took the time to troubleshoot and provide a solution. Initially, my anchor links were unresponsive when formatted like this:

http://sitename.com/page#anchor

I then attempted the following, but it did not work:

http://sitename.com/page/#anchor"

Instead of giving up in frustration, I kept trying different options until success was achieved by using:

http://www.sitename.com/page/#anchor

If you are experiencing similar difficulties, give this a try and hopefully, it will resolve your issue as well.

Answer 4

For those facing issues with Index navigation links on a Squarespace page and Safari on iOS, I took the time to troubleshoot and provide a solution. Initially, my anchor links were unresponsive when formatted like this:

http://sitename.com/page#anchor

I then attempted the following, but it did not work:

http://sitename.com/page/#anchor"

Instead of giving up in frustration, I kept trying different options until success was achieved by using:

http://www.sitename.com/page/#anchor

If you are experiencing similar difficulties, give this a try and hopefully, it will resolve your issue as well.

Answer 5

Answer №3

I tried the solutions provided above, but couldn't get it to work, so I came up with my own workaround.

Objective: Scroll to anchor "#issues" after navigating to URL "https://example.com/issues/"

Create a link "https://example.com/issues?anchor=issues"
On the page "https://example.com/issues", include the following JavaScript:

   <script>
       if (window.location.href.search("anchor=issues") > 0) {
           window.location.href= "https://example.com/issues/#issues";
       }
   </script>

Voila!

--

You will notice that when you open the link "https://example.com/issues/#issues" in Safari, it scrolls from the anchor to the top of the page. Then, if you edit the URL and click the submit button, you will be scrolled to the anchor.

I hope this issue gets resolved quickly, and they add push notification support soon.

Answer 6

I tried the solutions provided above, but couldn't get it to work, so I came up with my own workaround.

Objective: Scroll to anchor "#issues" after navigating to URL "https://example.com/issues/"

Create a link "https://example.com/issues?anchor=issues"
On the page "https://example.com/issues", include the following JavaScript:

   <script>
       if (window.location.href.search("anchor=issues") > 0) {
           window.location.href= "https://example.com/issues/#issues";
       }
   </script>

Voila!

--

You will notice that when you open the link "https://example.com/issues/#issues" in Safari, it scrolls from the anchor to the top of the page. Then, if you edit the URL and click the submit button, you will be scrolled to the anchor.

I hope this issue gets resolved quickly, and they add push notification support soon.

Answer 7

Answer №4

If you're experiencing issues with Safari losing the anchor tag after redirecting, it's best to steer clear of anything that results in a secondary redirect.

Always use the complete URL (.)
Note whether there is a redirect to www or not (www.domain...)
Ensure to add a trailing / if there is no prefix like .html/.php (mypage/)
```
http://www.domain.tdl/mypage/#safari
```

Consider using tools like cURL to check for redirects

curl -I http://www.domain.tdl/mypage/#safari

Answer 8

If you're experiencing issues with Safari losing the anchor tag after redirecting, it's best to steer clear of anything that results in a secondary redirect.

Always use the complete URL (.)
Note whether there is a redirect to www or not (www.domain...)
Ensure to add a trailing / if there is no prefix like .html/.php (mypage/)
```
http://www.domain.tdl/mypage/#safari
```

Consider using tools like cURL to check for redirects

curl -I http://www.domain.tdl/mypage/#safari

Answer 9

Answer №5

I've been struggling with an issue on a client project, and I wanted to share a solution I discovered that revived dead anchor links on both mobile and desktop versions of the site.

Initially, I thought the problem was due to too many scripts and CSS on the page that I couldn't modify. Since the site is part of a global corporate network, I have to adhere to their guidelines and rules, limiting my ability to make changes. However, I found a workaround that worked:

href="#anchorname" target="_top"

The key here is using the target tag "_top."

According to http://www.w3schools.com/tags/att_a_target.asp, the default target is "_self." Even though your HTML generator might not explicitly include this code because it's the default, specifying "_top" as the target solved the dead link issue in my case.

I hope this solution proves helpful for you as well.

Answer 10

I've been struggling with an issue on a client project, and I wanted to share a solution I discovered that revived dead anchor links on both mobile and desktop versions of the site.

Initially, I thought the problem was due to too many scripts and CSS on the page that I couldn't modify. Since the site is part of a global corporate network, I have to adhere to their guidelines and rules, limiting my ability to make changes. However, I found a workaround that worked:

href="#anchorname" target="_top"

The key here is using the target tag "_top."

According to http://www.w3schools.com/tags/att_a_target.asp, the default target is "_self." Even though your HTML generator might not explicitly include this code because it's the default, specifying "_top" as the target solved the dead link issue in my case.

I hope this solution proves helpful for you as well.

The functionality of the anchor tag is not supported by the Safari browser on iPhone devices

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Footer placement not aligning at the bottom using Bootstrap

The functionality of Jquery AJAX is operational, however, the message being displayed appears to

Error encountered: iPad3 running on iOS7 has exceeded the localStorage quota, leading to a

Unable to Utilize Custom Colors in Tailwind CSS within NextJS

Can someone explain why my table in Laravel is only showing the third set of data and not the others?

Developing an HTML table for room reservations using PHP - a comprehensive booking system

Calculate the sum of hours worked in a day using pure JavaScript, no external libraries required

"Upon loading the page, I encounter JavaScript errors related to Angular's ngOnInit function. However, despite these errors,

Tips for accessing a URL with a specific value in the HTML file

Grails is experiencing a surge of duplicate events being triggered simultaneously

Initiate keyframe animation after completion of the transition (CSS)

Updating the jQuery mobile webpage

Using JavaScript to display content on the screen

Sort the data - a selection menu is included in each row of the table

Issue with Ionic app on iPhone X not correctly detecting safe areas

Unable to make the Show/Hide Loading GIF function work as intended

Facing Challenges with Python Selenium while Accessing Specific Form Elements in Salesforce

npm installs a multitude of dependencies

How to Implement Autoplay Feature in YouTube Videos with React

Using HTML and JavaScript to add variables into the URL within the window.location