ionic-framework: bug: Anchor links not responding - iOS 15 beta
Prequisites
- I have read the Contributing Guidelines.
- I agree to follow the Code of Conduct.
- I have searched for existing issues that already report this problem, without success.
Ionic Framework Version
- v4.x
- v5.x
- v6.x
Current Behavior
Any anchor link tag in our Ionic 5 application is not being actioned in iOS 15 beta. This includes anchor links with:
- click events
- routerLink navigation
Expected Behavior
Behave as any other IOS version where anchor links perform as expected
Steps to Reproduce
- iOS 15 beta on iOS device
- try to click any anchor link in the code with click event, function attached or routerLink
Code Reproduction URL
No response
Ionic Info
Ionic:
Ionic CLI : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 5.6.12 @angular-devkit/build-angular : 12.1.4 @angular-devkit/schematics : 12.0.5 @angular/cli : 12.1.4 @ionic/angular-toolkit : 4.0.0
Capacitor:
Capacitor CLI : 3.1.2 @capacitor/android : 3.1.2 @capacitor/core : 3.1.2 @capacitor/ios : 3.1.2
Utility:
cordova-res : 0.15.3 native-run : 1.4.0
System:
NodeJS : v14.17.0 (/usr/local/bin/node) npm : 6.14.13 OS : macOS Big Sur
Additional Information
Code examples of our anchor links not working in iOS 15:
<a [routerLink]="RouteEnum.FundsWithdrawAccountAdd">Testing routerLink</a>
<a (click)="logout()" class="text-secondary link-text">Testing click event</a>
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Comments: 19 (8 by maintainers)
Update: If anyone is still looking for a fix, changing the pointer-events css property for hyperlinks fixes the issue. I am using following styles to have the hyperlinks working properly:
a { pointer-events: initial; }Hi everyone,
Good news! This issue was resolved in iOS 15.1. As of that version, I can no longer reproduce the issue. I recommend updating to iOS 15.1 to receive this fix.
I am going to close this issue. Thanks!
No public WebKit bug report yet. If you are able to reproduce this issue outside of Ionic, feel free to file one yourself. Otherwise, I can file one when I am able to create a minimal reproduction outside of Ionic.
@KirstenStake I came across the same issue today when working with an Ionic 3 application. I checked this issue on Ionic 5 based project as well and could reproduce the same behaviour. @liamdebeasi Apologies on tagging you to the comment, I thought this would be better given that you have already mentioned availability of iOS 15 device.
I have created a project based on sidemenu starter, just in order to ease navigation related tasks.
Follow the steps below to reproduce the issue when run on iOS 15 device/simulator:
In case the issue is non-reproducible on first attempt, navigate back to ‘Inbox’ page by back swipe gesture and repeat the steps.
Additionally, I made an observation upon inspecting that the anchor tags does not seem to receive any selection/click event and so I have also logged the element targeted by click event when inside the about page.
Project Link: https://github.com/kushagranigam/ionic-non-reactive-anchor-tags