bug: bundle includes custom styles to support very old IE versions which cause UI issues

Prerequisites

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

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

The latest ionic 6.x does not support old IE browser versions - see https://ionicframework.com/docs/reference/browser-support, however, the bundle created still includes styles to fix some UI issues for old IE browser versions. For example, https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/normalize.scss#L37

Please note that those styles are still included even though the .browserslistrc does not include the line to support for IE or Edge altogether. For example, here is my *.browserslistrc file

Chrome >=60
# Firefox >=63
# Edge >=79
Safari >=13
iOS >=13

The problem is that those fixes breaks some UI in my application (specifically, makes the images displayed with the wrong aspect ratio)

Expected Behavior

Not to include styles/fixes for unsupported/very old browsers

Steps to Reproduce

1. create new ionic project from one of the started template projects
2. add an image to the main page
3. exclude support for IE/Edge browser from .browserslistrc
4. build and run the application
5. check that the image added has **max-width: 100%" style applied from normalize.css, which is the fix for IE 8/9/10 - see https://github.com/ionic-team/ionic-framework/blob/main/core/src/css/normalize.scss#L37

OR, you can clone this project https://github.com/ryaa/ionic-includes-old-ie-browser-styles, change to the project directory, run npm install and then ionic serve and check the styles applied to the image displayed on the main page (see the step 4 above).

Code Reproduction URL

https://github.com/ryaa/ionic-includes-old-ie-browser-styles

Ionic Info

Ionic:

   Ionic CLI                     : 6.20.3 (/Users/alexryltsov/.nvm/versions/node/v18.12.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.4.0
   @angular-devkit/build-angular : 15.0.3
   @angular-devkit/schematics    : 15.0.3
   @angular/cli                  : 15.0.3
   @ionic/angular-toolkit        : 6.1.0

Capacitor:

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

Utility:

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

System:

   NodeJS : v18.12.0 (/Users/alexryltsov/.nvm/versions/node/v18.12.0/bin/node)
   npm    : 9.0.0
   OS     : macOS Monterey

Additional Information

See the style from from normalize.css applied to the image

[liamdebeasi]

Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/26465, and a fix will be available in an upcoming release of Ionic Framework.

[ryaa]

Thanks for the reply. Are you able to ensure .leaflet-marker-icon has a higher selector specificity that way it overrides max-width: 100%?

yes. adding the below to my app wide scss fixed my problem

.leaflet-marker-icon {
    max-width: none;
}

We do not need this anymore, so I am removing the IE-specific code in https://github.com/ionic-team/ionic-framework/pull/26465. It looks like this was added years ago and never reevaluated when we dropped IE support.

Awesome. Thank you very much for the great support!!!

P.S. if you don’t mind, i will remove the screenshots from my previous post for the security reasons. thank you again