My team is experiencing a very specific bug with Ionic that we cannot figure out. We have a simple ion-button implementation as follows:
<ion-button
fill="clear"
size="small"
color="primary"
(click)="forgotPassword()"
>
Forgot your Password?
</ion-button>
We have set the primary color as follows (code edited down for conciseness):
@mixin main-colors {
--ion-color-primary: #ffab00;
}
:root {
@include main-colors;
}
@media (prefers-color-scheme: dark) {
body,
.md body,
.ios body {
@include main-colors;
}
}
The button (and every other button that is implemented the same way) displays correctly on every browser and every device that we have tested with one exception: iOS light mode (Safari and native). The button text displays a noticeably lighter color with a small border (see comparison screenshots below). And even then, it is only on our iPhone XR and iPhone 12 models. We tested on an older iPhone 5 SE and could not reproduce it.
Dark mode (correct color):
Light mode (incorrect color):
After extensive testing, we have found that adding expand="block" to the button will resolve the issue, but that is obviously not ideal. In addition, we have another button in the app with fill set to outline instead of clear, and the block workaround does not work for it.
iOS version: 14.7.1
Ionic version: 5.0.0
Any assistance would be much appreciated. Thanks in advance!
1 post - 1 participant