framework7
framework7 copied to clipboard
Use <button> instead of <a> in FAB buttons
- Framework7 version: 5.7.12
- Platform and Target: iOS 16, Capacitor 3
- Live Link or CodeSandbox: https://framework7.io/kitchen-sink/core/?theme=ios&mode=light&example-preview=true#!/fab/
Describe the bug
Apple's iOS Safari browser, even when running in Capacitor, will try to show a link preview when the user does a long press. It refuses to run the typical click or touch events as a result. This can frustrate users of the application. In fact the we've seen users who get into a horrible feedback loop where they try to press harder and longer to make the button work.
Also, semantically, a hyperlink is something that links to another page while a button performs an action. In this case, I think the the correct semantic element to use is a
To Reproduce
Steps to reproduce the behavior:
- Go to https://framework7.io/kitchen-sink/core/?theme=ios&mode=light&example-preview=true#!/fab/ using an iPhone or other iOS device.
- Press and hold the top left button (or any of the FAB buttons) for 1-2 seconds. Really, I should be able to hold a button for 30s and it should still respond.
Expected behavior
I expect the action associated with the button to trigger. In the case of the demo, the FAB should display sub-actions.
Actual Behavior
Zilch
Screenshots
If applicable, add screenshots to help explain your problem.
Additional context
Add any other context about the problem here.