Toolbar positioning in inline mode set with decimal values results in blurred svg icons

[ilant]

It's a bug in the last TinyMCE Beta version, and the last Mozilla (main and developer versions)

Using Inline version for editing, when the toolbar get positioned with decimal values (screenshot), the icons are blurred.

[alecpl]

Icons are blurred in Firefox also for normal editor mode e.g. at https://www.tiny.cloud/. There's no issue in Chrome. Changing the button's margin like .tox .tox-tbtn { margin: 2px 0; } fixes this, but only for first line of the toolbar. It does not work when the toolbar has more lines. So, that's not the way to go.

[lnewson]

This issue should now be fixed in 5.0.1, as the inline toolbar now ensures it isn't positioned using fractional pixels. Please let us know if you find any further problems!

[alecpl]

@lnewson Not fully fixed. Using Firefox visit https://www.tiny.cloud/ and set screen width to 760px. Strange thing is this depends on the position of the menubar in the whole page not inside the editor. If you drag the screen and resize it the icons' sharpness will change. I'm not sure this will be something fixable or it's a Firefox issue we have to live.

[lnewson]

@alecpl that page isn't using 5.0.1, it's still on 5.0.0. However in saying that, we are aware of a separate issue to this that can produce fuzzy icons for any mode of the editor, not just inline (which is what I think you're referring to).

[alecpl]

This is not fixed. Problem exists if the whole editor element is positioned on a sub-pixel. I've found a better solution in https://stackoverflow.com/questions/26554832/keep-svg-element-on-exact-pixel:

.tox-icon {
     transform: translate(0, 0);
}

[lnewson]

@alecpl as I said above that's a different issue, for which we have an internal issue already logged (though it is somewhat related). As for the suggestion, we investigated that originally and determined it's not a viable solution because a) it doesn't work on all browsers (eg IE) and b) causes the icons to be mispositioned, such that the icons are no longer center aligned.

[lnewson]

@alecpl just as a heads up, looks like Firefox 68 has fixed the root cause of the SVG's being rendered blurry: https://bugzilla.mozilla.org/show_bug.cgi?id=608812 So once that's released, the issue you mentioned should only impact IE users I believe.

Note: I tested Firefox 68 Beta, since Firefox 68 isn't scheduled to be released to stable until early July at this stage.