Edge рендерит CSS-трансформацию каждый раз по-разному - PullRequest
Новая
       17

Edge рендерит CSS-трансформацию каждый раз по-разному

0 голосов
/ 17 апреля 2019

У меня есть флажок, который отображается с использованием свойства transform. Вот как это выглядит: 

.ex-checkbox-image-tick {
//1rem = 16px
     border-radius: 0.15rem;
     border: 0.15rem solid transparent;
     border-right-color: $ex-white;
     border-bottom-color: $ex-white;
     width: 0.45rem;
     height: 0.65rem;
     transform: rotateZ(45deg);
     pointer-events: none;
}

Затем я разместил свой HTML на сайте несколько раз. Это тот же компонент с тем же примененным стилем:

edge checkbox tick

Как видите, каждый тик флажок отображается немного по-другому. Как исправить эту проблему? Или я должен жить с этим, потому что это край.

1 Ответ

0 голосов
/ 17 апреля 2019

Вы можете попробовать включить 3D-рендеринг, который использует графическую карту для аппаратного ускорения вашего CSS.

Для этого измените строку ...

transform: rotateZ(45deg);

в ...

transform: translateZ(0) rotateZ(45deg);

Это должно заставить браузер запускать ускорение графического процессора, что может решить вашу проблему.

...