ionic-team / ionic-team/ionic-framework

bug: Inconsistent Font Weight in ion-item-divider Across Android and iOS

Open
#30,011 1 comment 1 reaction 0 assignees View on GitHub
triage
Dominant language
TypeScript
Stars
52.7k
Forks
13.3k
Avg merge
1d 15h
Merged PRs (30d)
51

Description

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

v7.x

### Current Behavior

I am using ion-item-divider in Ionic, but the issue is that on Android, the text inside ion-item-divider has a normal font weight, while on iOS, the font weight is bold

### Expected Behavior

I believe we are using a hybrid mobile application framework, and when both platforms behave differently for the same web component, it becomes really hard to maintain. How can I manage this?

### Steps to Reproduce

Please visit - https://ionicframework.com/docs/api/item-divider

iOS
![image](https://github.com/user-attachments/assets/bd26de44-2430-4b4c-a21e-afa0acca1191)

Android
![image](https://github.com/user-attachments/assets/8d9c820b-c947-472b-9322-222e87c074ba)

### Code Reproduction URL

https://github.com/souravion/item-divider

### Ionic Info

Ionic:

Ionic CLI : 7.1.5 (C:\mypc\xxxxx\AppData\Roaming\npm\node_modules\@ionic\cli)
Ionic Framework : @ionic/angular 6.7.5
@angular-devkit/build-angular : 13.2.6
@angular-devkit/schematics : 13.3.11
@angular/cli : 13.3.11
@ionic/angular-toolkit : 5.0.3

Capacitor:

Capacitor CLI : 6.1.2
@capacitor/android : 6.1.2
@capacitor/core : 6.1.2
@capacitor/ios : 6.1.2

Utility:

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

System:

NodeJS : v20.15.1 (C:\Program Files\nodejs\node.exe)
npm : 10.7.0
OS : Windows 10

### Additional Information

_No response_

Contributor guide

Open the contributing guide

Research direction

Start with the ion-item-divider API example and the linked reproduction at souravion/item-divider, comparing its rendered font weight on Android and iOS. Trace the component's platform-specific styling and verify that the same divider text has consistent font weight across both platforms.

Written by the indexing model from the issue text.

Assessment

Tech stack
android, angular, ios, typescript
Domain
design, frontend, mobile
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.