Blurry dropdowns on Chrome

[lucasriondel]

🐞 Bug report
CKEditor 5

Dropdowns menus appear blurry on chrome :

https://i.imgur.com/VVC5n9R.png

See the same on firefox :

https://i.imgur.com/OGKVFL3.png

This can apparently be fixed if you follow the instructions on this Stack Overflow post: https://stackoverflow.com/questions/27385126/chrome-font-appears-blurry

---

If you'd like to see this fixed sooner, add 👍 to this post.

[Reinmar]

You posted wrong links, I think. Could you fix them?

Also: what OS do you use?

[lucasriondel]

Sorry about the links. I am using Windows 10 Pro, version 1803.

[Reinmar]

Are these CKEditor 5 drop downs? If so, you changed their styling completely. Can you reproduce any issues with the default styling?

[lucasriondel]

Yes, these are from CKE5, and I've changed their styles. but the blurry effect was here before, changing the style is not the cause.

[Reinmar]

cc @dkonopka @Mgsy could you confirm that dropdowns are blurry on Windows? Maybe this is OS specific because for me they look good (on macOS).

[Mgsy]

@Mgsy could you confirm that dropdowns are blurry on Windows?

I've checked it on Windows 10, v.1803 with Chrome 67.0.3396.79 and the dropdowns display properly. The same on macOS.

[Reinmar]

@lucasriondel, could you perhaps create a JSFiddle that would show this issue?

[dkonopka]

By default we are using translate3d hack to prevent situations like blurred fonts, so everything should be ok - maybe try to change the font and check again?

Additionally, I can't reproduce this issue too.

[lucasriondel]

without my styles applied : https://i.imgur.com/mfShAl9.png

[lucasriondel]

also happens on the tooltip : https://i.imgur.com/KmPcjoC.png

[Reinmar]

The same as here: #1049 (comment). To be able to help you we need to be able to see the issue. A demo is a must-have in such a case.

[lucasriondel]

On the issue you've referenced : i don't have the issue. On my original project, my editor is inside a modal, I think that must be the reason. I'll investigate.

[lucasriondel]

Ok, the reason it's blurry is because my modal (which host the editor) is transformed by a translate. nested transforms are not giving the good behavior on CKEditor, which displays my dropdown blurry.

[Reinmar]

Thanks for checking this.

Is there something that we can do with it since we already use the hack to make text smooth? Or is it a browser issue and should be fixed upstream?

[lucasriondel]

I really don't know... I've fixed my modal, but I don't know what you could do to fix it. At least now, you know !
But IMHO, this might be browser related.

[yuanyesong]

Same issure:
Dropdowns on Edge looks clearer than on Chrome

OS: Windows 10 1903
Chrome: 76.0.3809.132 x64

screenshot of CKEditor5 offical demo
Edge

Chrome

[dkrahn]

Same here print taken from live CK Demo

It has something to do with the CSS transform. To me it becomes more visible when I toggle the responsive device option in chrome dev(might help to reproduce).

.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw {
    transform: translate3d(0,100%,0);

Apparently changing to this fixes the issue(solution from https://stackoverflow.com/questions/27385126/chrome-font-appears-blurry):

.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw {
    transform: translateY(calc(100% - .5px));

[yuanyesong]

Same here print taken from live CK Demo

It has something to do with the CSS transform. To me it becomes more visible when I toggle the responsive device option in chrome dev(might help to reproduce).

.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw {
    transform: translate3d(0,100%,0);

Apparently changing to this fixes the issue(solution from https://stackoverflow.com/questions/27385126/chrome-font-appears-blurry):

.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se, .ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw {
    transform: translateY(calc(100% - .5px));

👍Much better! but issure still exists. Appearance is different from Edge.

[7iomka]

same issue. Hacks not resolve blurry in chrome (I'm from Mac Os)

[7iomka]

I fixed the issue - make backface visibility to be hidden on inner dropdown panel elements:

.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_se > *,
.ck.ck-dropdown .ck-dropdown__panel.ck-dropdown__panel_sw > *{
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

UPD: Note: This kind of workaround need be to implemented in rest of elements with the same issue (for example inside drop-content of list-items (.ck.ck-list > *)

[Reinmar]

Thanks for the research! We'll try to include this change in the upcoming release.

If it works for those of you who stumbled upon this issue, please add e.g. 👍 to @7iomka's comment. It's always easier for us to merge a change which is confirmed to be good by more people :)

[oleq]

Related #2059.

[Kepro]

very old known issue with transform: translate3d(0,100%,0); ... not sure why they are not using just top: 100% instead of translate3d... and still not fixed

[mlewand]

#2059 marked as a duplicate of this issue.

[jodator]

@dkonopka & @oleq for me changing only this change in the dropdown panel CSS works:

https://github.com/ckeditor/ckeditor5-ui/blob/ffec16ab9ec48edd68a076c69c646a2a5a9a7b0a/theme/components/dropdown/dropdown.css#L50:

		&.ck-dropdown__panel_se,
		&.ck-dropdown__panel_sw {
			top: 100%;
			bottom: auto;
		}

ps.: also I've removed the will-change for that. The backface-visibility wasn't working for me.

I've found this that speask against using absolute / top in favor of translate3d but ATM it gives blurry dropdowns :(

ps.: This is a whole change: https://github.com/ckeditor/ckeditor5-ui/compare/i/1053?expand=1 - I this works on my machine though.

Edit: this is how this fix works (left fix, right master):

[oleq]

@jodator LGTM. But first, let's make sure that by removing will-change we don't cause a regression in #668. Can you check this out?

[jodator]

@oleq: This is how this looks:

on the i/1053 branch:

on master branch:

And alignment (the one from #668):

on the i/1053 branch:

on master branch:

[Reinmar]

I confirmed @jodator's results. Also, I didn't spot any issues on Safari. Let's merge this change so we can live with it for a longer time before releasing it.

[Reinmar]

Thank you all for the feedback!