Safari anchors on links not working
The problem was I had a redirect header in the page I was linking to.
Opera, IE, Chrome, Firefox will carry over the anchor to the new page. However safari loses the anchor on the redirect.
If you are having trouble with safari anchors disable any redirects.
Why does Safari not update the anchor link?
Turns out that for the anchor-links to work in this context, they have to be written as full URL, not relative to the folder structure.
This href="https://website.com/about#anchor1"
Instead of this href="../about.html#anchor1"
Anchor tag doesn't work in iPhone Safari
Opera, IE, Chrome and Firefox will carry over the anchor to the new page. However, Safari loses the anchor on the redirect.
So what if you add /
just before the ID Tag
?
Old 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
Another solution is that you'd have to delete both "www." from the domain and add a forward slash before the anchor tag
in the URL/pathname before Safari would respond properly. Firefox doesn't seem to care, and I haven't gotten to testing on IE yet.
Safari anchors on links not working
The problem was I had a redirect header in the page I was linking to.
Opera, IE, Chrome, Firefox will carry over the anchor to the new page. However safari loses the anchor on the redirect.
If you are having trouble with safari anchors disable any redirects.
iPhone (Safari) anchor tags don't work as intended
There is a problem with CSS :focus
on iOS Safari.
The answers from this question seem to work. You need to add tabindex="1"
to your link:
<a href="#" class="showme" onclick="return false" tabindex="1">View Bio</a>
https://jsfiddle.net/1kqxopzs/
Related Topics
Inline Style to Act as: Hover in CSS
Fire Onmouseover Event When Element Is Disabled
How to Serve Up Images in Angular2
CSS Way to Horizontally Align Table
How to Connect a Child Item in a Tree-Structure Visualization with CSS
HTML5 Audio Not Working on Firefox
Difference Between "Visibility:Collapse" and "Display:None"
How to Remove the First Empty Column in a CSS Grid
Jquery - Follow The Cursor with a Div
R: Saving Multiple HTML Widgets Together
How to Remove Background-Image in CSS
How to Get Index of Parent Element Using Watir Webdriver
PHP Mail() - How to Put an HTML Link in an Email
How to Float a Div Over Google Maps
HTML Float Right Element Order
Convert Embedded Svg to Png In-Place