New admin theme - TinyMCE toolbar icons are blurry on non-Retina screens + suggested fix

[sevenstudio]

Not sure if this was reported, but as in the tile, in the new admin theme TintMCE icons are blurry on non-Retina screens:

The issue is caused by line (in dev tools admin.css line 4027):

.pw .tox.tox-tinymce .tox-editor-header, .pw .tox.tox-tinymce-inline.tox-tinymce--toolbar-sticky-off .tox-editor-header {
  translate: 0 1.5px;
}

Issue is caused because of using half pixel value - 1.5px, everything looks correctly with full pixel value, 1px, 2px ...

Bellow screenshot shows issue and full pixel example.

[ryancramerdesign]

Thanks @sevenstudio I can't seem to duplicate it, testing on a 72 dpi screen. It could be my eyes just aren't good enough to detect the difference, though I see it in your screenshot. During testing, once it did load a little blurry and then became sharp after 1 second, and I'm not sure why, and couldn't repeat it a second time, as it just stayed sharp after that. I've changed it to 1px as it doesn't seem to hurt anything. Please let me know if you find anything is still blurry.

[sevenstudio]

Hi @ryancramerdesign, I'm testing the new panel - haven't noticed any blurring like this anywhere else. This element was very noticeable compared to the standard ui-kit theme. It may be OS and browser related (maybe your browser handles subpixel better). The screenshot was taken on Windows 11 - Firefox, Chromium-based browsers rendered it better, but still with a slight blur. Full Pixel fixes the problem in all of them. In my case everything works fine without that line, but I'm guessing it was added intentionally. Thanks for applying the fix!