Ошибка рендеринга в Mat-Icon-Button с Bootstrap Material Design - PullRequest
Новая
       38

Ошибка рендеринга в Mat-Icon-Button с Bootstrap Material Design

0 голосов
/ 22 октября 2018

Проблема

Итак, на работе мы используем jhipster для генерации нашего проекта.У нас есть набор кнопок действий (mat-icon-button) внутри таблицы, которые запускают различные действия.

Одна из кнопок имеет проблему с рендерингом, которую гораздо проще показать, чем объяснить, поэтому, пожалуйста, примитепосмотрите на это: https://imgur.com/bylw14p

Это происходит только в IE (я использую IE v11.0.9600.19129).Я работаю в среде большого числа сотрудников, поэтому IE является стандартным браузером, и я не могу его изменить.

Я упростил и повторил нашу настройку в простом приложении, которое я не генерировал, используя jhipster, но используяangular-cli.(код ниже)

Странно, но этот эффект происходит только в первом столбце таблицы, но кнопка в первом ряду всегда остается без изменений.Нажатие на разные кнопки вызывает нежелательный эффект, который может произойти и на других кнопках (непредсказуемо).

Я предполагаю, что начальная загрузка (которую использует jhipster) и кнопки углового материала (которые мы вставляем)противоречат друг другу.Но я действительно понятия не имею.

(не так уж и хорошо) Обходные пути

  • В нашем приложении (не в моем упрощенном) оно работает для установки position: relative.Но затем эффект пульсации материала больше не появляется только на кнопке, а распространяется по всей таблице.
  • Также помогает настройка IE для программного рендеринга.Но это не практично, так как мы никак не можем изменить браузер.Поэтому он должен работать с текущей установленной версией IE.

Код из демонстрационного приложения

style.scss 

/*@import 'bootstrap-variables'; */
@import '~bootstrap-material-design/scss/bootstrap-material-design'; <----- When I comment out this line, you'll get the third image.
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import '~@angular/material/theming';

@import '~material-design-icons-iconfont/dist/material-design-icons.css';
.mat-icon-button {
    color: red;
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: 'liga';
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

package.json 

{
  "name": "button-graphics-bug-in-ie",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.10",
    "@angular/cdk": "^6.4.7",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/material": "^6.4.7",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "angular-material-icons": "^0.7.1",
    "bootstrap": "^4.1.3",
    "bootstrap-material-design": "^4.1.1",
    "classlist.js": "^1.1.20150312",
    "core-js": "^2.5.4",
    "material-design-icons-iconfont": "^3.0.3",
    "rxjs": "~6.2.0",
    "web-animations-js": "^2.3.1",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.5",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

my-button.component.html 

<button mat-icon-button color=primary>
    <mat-icon aria-label="This is an aria-label">favorite</mat-icon>
</button>

my-material.ts

Я загружаю MatIconButton через этот класс, который импортируется в app.module: 

import {MatButtonModule, MatIconModule} from '@angular/material';
import { NgModule } from '@angular/core';

@NgModule({
    imports: [MatButtonModule, MatIconModule],
    exports: [MatButtonModule, MatIconModule],
})
export class MyMaterialModule { }

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MyMaterialModule } from './my-material';
import { MyButtonComponent } from './my-button.component';
import { MyTableComponent } from './my-table.component';
import { MatIconModule } from '@angular/material';

@NgModule({
  declarations: [
    AppComponent,
    MyButtonComponent,
    MyTableComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MyMaterialModule,
    MatIconModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
...