Browser issue Chrome 66+: Smilies broken when using browser zoom

[Steffen]

Affected version

2.0.4

In Chrome 65 everything is fine. But in Chrome 66 and 67 the smilies are broken if you zoom to 110% or 125% (150% is fine for some reason).

This issue does not seem to be OS-specific. I've tested on Windows 7, Windows 8.1, Windows 10, Linux, and macOS.

The issue is not limited to the editor toolbar shown in the screenshot.

 

[Steffen]

Workaround: Change "background-size: 100%" to "background-size: 22px".

 

[Steffen]

https://bugs.chromium.org/p/chromium/issues/detail?id=825239

 

[Chris D]

Thanks for reporting this to them. It exists in Canary (67), although I can't reproduce it in Chromium.

Certainly seems to be something on their side as I can't imagine they'd expect this to be working as intended now.

 

[Steffen]

According to the comments in the bug report, Chrome 66 will be promoted to the stable channel with this regression unfixed.

 

[Chris D]

That's unfortunate, but so be it.

We won't be implementing a workaround. At the very least we could ensure that new installs use 22px rather than 100% but I don't fancy much looping through everyone's smilies on upgrade, trying to figure out whether we can safely set the background-size to a pixel value rather than percentage etc. so ultimately, it's probably best to just wait for them to fix it.

 

[interforo]

Workaround: Change "background-size: 100%" to "background-size: 22px".

can you elaborate more please?

"background-size: 100%" to "background-size: 22px".

 

[Steffen]

Putting the following into your extra.less template should fix the issue (assuming that all your smilies have a size of exactly 22x22 pixels which is the case for the default smilies):

.smilie--sprite {
    background-size: 22px !important;
}

What should also work: disable the checkbox "Enable CSS sprite mode with the following parameters" for all smilies (could have a small negative impact on page load times if you are not using HTTP/2).

 

[Chris D]

This should be fixed as of Chrome 68.