iOS15 shows blank space when using Green components

[SamanTheBoss]

Bug already reported?

• [X] I confirm that I have checked if the bug already has been reported

For which framework/library you are reporting the bug

Core, Angular

Component name

Badge

Description

Using the component with within a conditional

block caused iOS 15 users to encounter an issue where they were unable to see the entire application. It was just a white area where the MFE should been.

Details:

The component uses Angular’s *ngIf directive to display a gds-badge with gds-icon-clock if statusMessage is not empty. The badge is styled with badgeVariant, and both the badge and icon components are imported from the @sebgroup/green-core library. Additionally, NggCoreWrapperModule is imported in the module file to integrate the green-angular library.

Issue Observed:

iOS users on version 15 reported that the app's content was not visible, potentially due to issues with rendering the gds-badge or gds-icon-clock components in iOS 15's WebKit rendering engine.

Suspected Cause:

Compatibility or rendering issues in iOS 15's WebKit engine when loading or displaying components from the @sebgroup/green-core library

Package.json

{ "private": true, "dependencies": { "@angular/animations": "^18.0.4", "@angular/cdk": "^18.0.4", "@angular/common": "^18.0.4", "@angular/compiler": "^18.0.4", "@angular/core": "^18.0.4", "@angular/forms": "^18.0.4", "@angular/platform-browser": "^18.0.4", "@angular/platform-browser-dynamic": "^18.0.4", "@angular/router": "^18.0.4", "@common-shell/shell-site-api": "^2.23.0", "@fortawesome/angular-fontawesome": "^0.15.0", "@fortawesome/fontawesome-svg-core": "^1.2.26", "@fortawesome/free-solid-svg-icons": "~6.1.2", "@fortawesome/pro-light-svg-icons": "~6.1.2", "@fortawesome/pro-regular-svg-icons": "^6.1.2", "@ng-bootstrap/ng-bootstrap": "^17.0.0", "@ngx-translate/core": "^13.0.0", "@ngx-translate/http-loader": "^6.0.0", "@popperjs/core": "^2.11.8", "@sebgroup/chlorophyll": "^1.11.2", "@sebgroup/fonts": "^1.0.0", "@sebgroup/green-angular": "^4.6.3", "bootstrap": "^5.3.2", "d3": "4.10.0", "highcharts": "^6.1.0", "moment": "^2.29.1", "ngx-moment": "^5.0.0", "ngx-webstorage-service": "^4.1.0", "perfect-scrollbar": "^0.7.1", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.14.7" }, "devDependencies": { "@angular-devkit/build-angular": "^18.0.5", "@angular/cli": "^18.0.5", "@angular/compiler-cli": "^18.0.4", "@angular/localize": "^18.0.4", "@commitlint/cli": "^17.7.1", "@commitlint/config-angular": "^17.7.0", "@commitlint/config-conventional": "^17.7.0", "@types/jasmine": "~3.6.0", "@types/jasminewd2": "~2.0.3", "@types/node": "^14.14.12", "codelyzer": "^6.0.0", "commitlint": "^17.7.1", "devmoji": "^2.3.0", "husky": "^8.0.3", "jasmine-core": "~3.6.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage-istanbul-reporter": "~3.0.2", "karma-jasmine": "~4.0.0", "karma-junit-reporter": "^2.0.1", "karma-mocha-reporter": "^2.2.5", "karma-sonarqube-unit-reporter": "0.0.23", "protractor": "~7.0.0", "pulltorefreshjs": "^0.1.21", "sonar-scanner": "^3.1.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~5.4.5" } }

Steps To Reproduce

Steps to Reproduce:

1. Open the application on an iOS device running iOS 15 in an application with Angular 18 (Also see our package.json)
2. Ensure the statusMessage variable is set to a non-empty string (e.g., "Loading" or "In Progress").
3. Observe the
   containing and components as it attempts to render.
4. Check if the app's content is fully visible or if the screen appears blank or partially loaded.

Expected Result:

The with should display correctly, and the application should be fully visible.

Actual Result:

The app appears blank or fails to display entirely on iOS 15 devices.

Current Behaviour

The app appears blank or fails to display entirely on iOS 15 devices.

Expected Behaviour

The rest of the app should be working and the badge should be showing.