Fix rounded links buttons on iOS 15.5 #1216
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
6 tasks
laurakarhu
approved these changes
Feb 1, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Fix iOS 15.5 (and hopefully 15.8) rounded link buttons.
Related Issue
I do not have an issue yet, but I do have an slack message with a thread: https://helsinkicity.slack.com/archives/CHCV3KTHA/p1705669479076289
Motivation and Context
It seems that at least iOS 15.5 and 15.8 render links in a weird way if
-webkit-appearance: button;is set. They ignore border-radius and padding properties from css if it is set. More current iOS versions do not have this problem.This problem comes probably from the original mindset of
.hds-buttononly applying to<button>elements when the normalize.css code was being merged with the button code. Now that.hds-buttonis also used for<a href="...-elements, the assumption fails.By modifying the button.css code we can get the original intent of normalize.css to work better in this case and exclude link buttons from the
-webkit-appearance: buttonissue.How Has This Been Tested?
On an iOS simulator for iOS 15.5
Screenshots (if appropriate):
Screenshot of a modified hds documentation page with
<button>and two<a hreflinks with similar styles but different rendering on iOS 15.5.Screenshot of originating source for normalize.css
Add to changelog