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

The CSS isn't functioning correctly in the HTML file as it is in the CSS file

Is there a way to use CSS to make a div expand as much as it can?

The issue of anchors with jQuery.ajax()

Tips for preventing text from changing its padding within a div when reducing the width and height dimensions

Issue with Laravel Blade template not linking CSS files in a subfolder

Arrange the HTML elements in a line, one following the next

Automatically generating new lines of grid-template-columns with CSS grid

You cannot assign type 'Node | null' to type 'Node' when attempting to loop through HTML elements in TypeScript

Revise the "Add to Cart" button (form) to make selecting a variant mandatory

Tips for aligning an image in the middle of a column within an ExtJS GridPanel

showing errors in case the username does not match the specified pattern

Addressing Image Issues in CSS Grid

Utilize Sass @extend to incorporate imported CSS files in the build process

Tips for animating input width as the size value changes during an ajax query transformation

Show the text area content in an alert when using Code Mirror

implementing datepicker on multiple textboxes in jQuery upon button click

Ensure that the TextBox field extends to the edges of the parent div, with full cross-browser compatibility

Converting JSON information into a mailto hyperlink

Does Blazorise support the Material .figure-is-16x16 class?

Guide to inserting a custom image into an Icon in next js