bug(COMPONENT): Font Awesome Icons have styling problems when a mat-button is on the page
- 主要言語
- TypeScript
- スター
- 25k
- フォーク
- 6.8k
- 平均マージ
- 1日 8時間
- マージ済み PR(30日)
- 91
説明
### Is this a regression?
- [x] Yes, this behavior used to work in the previous version
### The previous version in which this bug was not present was
19.2.8
### Description
Material buttons cause styling for mat-icon-buttons containing font awesome icons in safari and chrome
### Reproduction
StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-ga6nsxqe?file=src%2Fmain.ts,angular.json,src%2Fglobal_styles.css
Steps to reproduce:
1. Clicking any of the red icon buttons will toggle a variable that controls whether the mat-button is in the DOM. To view the problem make sure the button is toggled visible.
### Expected Behavior
Icons will remain the same size and stay visible weather there is a material button in the DOM or not
### Actual Behavior
In Chrome: Some of the taller font awesome icons will be extra tall when a button is in the DOM and be the correct size when there are no buttons in the DOM. Forcing sizes with css classes or direct styles does not impact the height of the icon when the material button is in the DOM. Note that fa-building and fa-play are two examples of taller font awesome icons while fa-toolbox is normal size. In Chrome fa-toolbox behaves how it should when the material button is in the DOM.
Here is what it looks like when the button is toggled into the DOM in chrome:
Here is what it looks like when the button is toggled out of the DOM in chrome:
In Safari: All of the font awesome icons disappear entirely when the button is in the DOM
Here is what it looks like when the button is toggled into the DOM in safari:
Here is what it looks like when the button is toggled out of the DOM in safari
Note the fourth icon is visible in safari, this is a normal home icon from material icons and I included it for reference. The other three (fa-building, fa-play, and fa-toolbox) are all font awesome icons
### Environment
Angular CLI: 20.3.10
Node: 20.19.1
Package Manager: npm 10.8.2
OS: linux x64
Angular: 20.3.11
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, router
Package Version
---------------------------------------
@angular-devkit/architect 0.2003.10
@angular-devkit/build-angular 20.3.10
@angular-devkit/core 20.3.10
@angular-devkit/schematics 20.3.10
@angular/cdk 20.2.13
@angular/cli 20.3.10
@angular/material 20.2.13
@schematics/angular 20.3.10
rxjs 7.8.2
typescript 5.8.3
Browsers: Chrome and Safari
コントリビューションガイド
調査の方向性
リンクされた StackBlitz の再現例から始め、特に src/main.ts、angular.json、src/global_styles.css を確認します。Chrome と Safari で mat-button を切り替え、Font Awesome のアイコンと material のホームアイコンを比較します。material ボタンの有無にかかわらず、両方のブラウザーでアイコンが期待されるサイズを保ち、表示され続ければ完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 38/100