Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Blurry dropdowns on Chrome #1053

Closed
lucasriondel opened this issue Jun 5, 2018 · 29 comments · Fixed by ckeditor/ckeditor5-ui#529
Closed

Blurry dropdowns on Chrome #1053

lucasriondel opened this issue Jun 5, 2018 · 29 comments · Fixed by ckeditor/ckeditor5-ui#529
Labels
browser:chrome package:theme-lark type:bug This issue reports a buggy (incorrect) behavior.

Comments

@lucasriondel
Copy link

lucasriondel commented Jun 5, 2018

🐞 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
Copy link
Member

Reinmar commented Jun 5, 2018

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

Also: what OS do you use?

@Reinmar Reinmar added type:bug This issue reports a buggy (incorrect) behavior. status:pending package:theme-lark labels Jun 5, 2018
@lucasriondel
Copy link
Author

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

@Reinmar
Copy link
Member

Reinmar commented Jun 6, 2018

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

@lucasriondel
Copy link
Author

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
Copy link
Member

Reinmar commented Jun 11, 2018

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
Copy link
Member

Mgsy commented Jun 11, 2018

@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.

image

@Reinmar
Copy link
Member

Reinmar commented Jun 11, 2018

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

@dkonopka
Copy link
Contributor

dkonopka commented Jun 11, 2018

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
Copy link
Author

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

@lucasriondel
Copy link
Author

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

@Reinmar
Copy link
Member

Reinmar commented Jun 11, 2018

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
Copy link
Author

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
Copy link
Author

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
Copy link
Member

Reinmar commented Jun 12, 2018

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
Copy link
Author

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
Copy link

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
edge

Chrome
chrome

@dkrahn
Copy link
Contributor

dkrahn commented Oct 4, 2019

Same here print taken from live CK Demo
image

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
Copy link

Same here print taken from live CK Demo
image

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
Copy link

7iomka commented Oct 7, 2019

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

@7iomka
Copy link

7iomka commented Oct 7, 2019

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
Copy link
Member

Reinmar commented Oct 8, 2019

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 :)

@Reinmar Reinmar added this to the iteration 27 milestone Oct 8, 2019
@oleq
Copy link
Member

oleq commented Oct 9, 2019

Related #2059.

@Kepro
Copy link

Kepro commented Oct 18, 2019

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
Copy link
Contributor

mlewand commented Oct 24, 2019

#2059 marked as a duplicate of this issue.

@mlewand mlewand added status:confirmed and removed pending:feedback This issue is blocked by necessary feedback. labels Oct 24, 2019
@jodator
Copy link
Contributor

jodator commented Oct 29, 2019

@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):
Selection_007

@oleq
Copy link
Member

oleq commented Oct 31, 2019

@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
Copy link
Contributor

jodator commented Nov 4, 2019

@oleq: This is how this looks:

on the i/1053 branch:

Selection_020

on master branch:

Selection_021

And alignment (the one from #668):

on the i/1053 branch:

Selection_023

on master branch:
Selection_022

@Reinmar
Copy link
Member

Reinmar commented Nov 6, 2019

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 added a commit to ckeditor/ckeditor5-ui that referenced this issue Nov 6, 2019
Fix: Use relative positioning for dropdowns to prevent ugly blurring in Chrome. Closes ckeditor/ckeditor5#1053.
@Reinmar
Copy link
Member

Reinmar commented Nov 6, 2019

Thank you all for the feedback!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
browser:chrome package:theme-lark type:bug This issue reports a buggy (incorrect) behavior.
Projects
None yet
Development

Successfully merging a pull request may close this issue.