Chrome & Angular 7: мигает неустановленный контент при перерисовке, если css импортирован через sanitizer - PullRequest
Новая
       8

Chrome & Angular 7: мигает неустановленный контент при перерисовке, если css импортирован через sanitizer

0 голосов
/ 13 января 2019

Я создал приложение, которое импортирует созданную пользователем таблицу стилей. В этом файле ссылка на локально сохраненный шрифт. Файл css импортируется с помощью функции DOMSanitizer sanitizer.bypassSecurityTrustResourceUrl("resources/custom-styles.css"). Это работает в целом, как и ожидалось; особенно с последним браузером Firefox.

Chrome (v.71) часто возвращается к резервному шрифту только для того, чтобы заменить его на миллисекунды позже. Похоже, это происходит каждый раз, когда обрабатывается mouseEvent (то есть перемещение мыши, щелчок, ...). Все обработанные события мыши имеют event.stopImmediatePropagation() общего - что я не могу себе представить, чтобы быть виновником.

В предыдущей версии я статически импортировал шрифт (@Import url ...), который хорошо работал в обоих браузерах.

custom-styles.css: 

@font-face {
  font-family: customFont;
  font-display: auto;
  src: local('customFont'), url(fonts/customFont.ttf) format("truetype");
}

.html: 

<link rel="stylesheet" [href]='sanitizer.bypassSecurityTrustResourceUrl("resources/custom-styles.css")'>

<div>
  <span style="font-family: customFont">My Font</span>
</div>

.ts 

import { Component, OnInit } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnInit {
  // title = 'app';   

  constructor(public sanitizer: DomSanitizer) { }

  ngOnInit() { }
}

Что я могу изменить, чтобы Chrome вел себя как Firefox?

...