Ckeditor5: Icons looks fuzzy on Firefox 57 (Quantum)

[jodator]

🐞 Is this a bug report or feature request? (choose one)

• Bug report

💻 Version of CKEditor

Latest master.

📋 Steps to reproduce

1. Open editor on Firefox 57.
2. Lookup toolbar icons.

✅ Expected result

Chrome:

❎ Actual result

Firefox 57 (Quantum) / Linux Mint 18.2 (Sonya):

📃 Other details that might be useful

I don't remember how that looked on previous Firefox.

[dkonopka]

As I see this fix is working (I think new Firefox is buggy with rendering 1px width/height points):

svg.ck-icon { 
     transform: translate3d( 0, 0, 0 ); 
}

[jodator]

I can confirm that it works for main toolbar icons but not with icons in dropdown:

When disabled translate3d( 0, 0, 0 ) in dev tools:

(the align right icon looks OK... but only this one)

[dkonopka]

We can also try a new fix for "blurred" elements:

will-change: transform;

but currently, it's not supported for IE/Edge .

The status of Will Change @Edge - still under consideration.

[Reinmar]

Icons were always fuzzy in Firefox. It's not something new (not a regression caused by Quantum).

[dkonopka]

@jodator .ck-dropdown__panel needs fix too then.

will-change: transform

Anyway every translate property in CSS should be changed to translate3d (or will-change).

[oleq]

PR please ❤️