bug: iOS Custom Fonts Causing Layout Issues

[MaddHatters]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

On iOS devices running, when specifying the Din font via @font-face layout issues occur. This issue does not appear to occur when running on Android devices or when in the browser.

This has been reproduced on a physical device running iOS 15.7.8 and an emulator running iOS 16.2

Expected Behavior

Layout issues should not occur when specifying a custom font.

Specific example of expected behaviour. When selecting an item, the selected item has white text with a blue background.

Steps to Reproduce

1. Pull down the app on a Mac
2. Run npm run reproduce and select an iOS device or simulator .
3. NOTE If running on a simulator the issue only occurs when the web inspector is open
4. Once the app loads select different options from the list. The blue highlight should stick with the selected item.
5. To see expected behavior, comment out --ios-font-family in variables.scss or comment out the @font-face definitions in globals.scss

Screenshot of selecting item 1 and then item 3. The expectation is that item 3 would have white text with a blue background.

Code Reproduction URL

https://github.com/MaddHatters/iOS-custom-font-issue

Ionic Info

Ionic:

Ionic CLI : 7.1.1 (/Users/user/.nvm/versions/node/v16.19.1/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.4.0 @angular-devkit/build-angular : 16.2.2 @angular-devkit/schematics : 16.2.2 @angular/cli : 16.2.2 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.4.0 @capacitor/android : not installed @capacitor/core : 5.4.0 @capacitor/ios : 5.4.0

Utility:

cordova-res : not installed globally native-run : 1.7.2

System:

NodeJS : v16.19.1 (/Users/user/.nvm/versions/node/v16.19.1/bin/node) npm : 8.19.3 OS : macOS Monterey

Additional Information

This may be a duplicate of https://github.com/ionic-team/ionic-framework/issues/26012 but I noticed it had been locked and no reproduction url had been provided.

Hoping this will help triage if it is indeed a duplicate.

[liamdebeasi]

Thanks for the report. I'm not able to reproduce this. The actual behavior matches the expected behavior when testing on iOS 16.6:

https://github.com/ionic-team/ionic-framework/assets/2721089/81757b2f-2b2f-4c97-a39e-6026b2004e0a

[MaddHatters]

Thank you @liamdebeasi.

I pulled down the repo on my end to check again. I am currently able to reproduce on a physical device running iOS 15.7.8 and an emulator running iOS 16.2. I haven't tested on any other versions of iOS. Perhaps it has was fixed in a later release of iOS.

Do you by chance have the ability to test using a device running iOS 15.7.8 or 16.2? It doesn't appear that I am able to run an emulator with 16.6 since I'm on an older device that only supports Monterey and can't update Xcode past 14.2.

If this doesn't appear to be related to the Ionic framework, do you have any ideas what might be causing the issue?

[liamdebeasi]

I tested using iOS 16.2, but I'm still not able to reproduce the reported behavior. I recommend checking to see if the computed color of the text in the item matches the CSS rule that is currently applied. If they match, then there's likely a logic bug somewhere. If they don't match then this could be a platform-level bug (i.e iOS/WebKit).

https://github.com/ionic-team/ionic-framework/assets/2721089/e9aa0ad5-8091-4b87-9416-9cf180de0e37

[MaddHatters]

Thank you, @liamdebeasi

I see now why you were not reproducing it on the emulator. I didn't realize that the issue only occurred on an emulator after the web inspector was open. Once I open the web inspector the issue starts to occur. When running on a real iOS device however, the web inspector did not need to be open.

See below how the applied styles do not match the UI.

Initial State

After toggling the background color off

Re-enable background color

[liamdebeasi]

Does this happen on any newer versions of iOS? This looks like a Safari/WebKit bug rather than an Ionic bug since it only reproduces on a simulator with dev tools open.

[MaddHatters]

@liamdebeasi it does not appear to be occurring on newer iOS devices that can run iOS 16+.

Thank you for your help :)

I will close this.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.