-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
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
Comments
You posted wrong links, I think. Could you fix them? Also: what OS do you use? |
Sorry about the links. I am using Windows 10 Pro, version 1803. |
Are these CKEditor 5 drop downs? If so, you changed their styling completely. Can you reproduce any issues with the default styling? |
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. |
I've checked it on Windows 10, v.1803 with Chrome 67.0.3396.79 and the dropdowns display properly. The same on macOS. |
@lucasriondel, could you perhaps create a JSFiddle that would show this issue? |
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. |
without my styles applied : https://i.imgur.com/mfShAl9.png |
also happens on the tooltip : https://i.imgur.com/KmPcjoC.png |
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. |
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. |
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. |
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? |
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 ! |
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).
Apparently changing to this fixes the issue(solution from https://stackoverflow.com/questions/27385126/chrome-font-appears-blurry):
|
👍Much better! but issure still exists. Appearance is different from Edge. |
same issue. Hacks not resolve blurry in chrome (I'm from Mac Os) |
I fixed the issue - make backface visibility to be hidden on inner dropdown panel elements:
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 ( |
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 :) |
Related #2059. |
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 |
#2059 marked as a duplicate of this issue. |
@dkonopka & @oleq for me changing only this change in the dropdown panel CSS works: &.ck-dropdown__panel_se,
&.ck-dropdown__panel_sw {
top: 100%;
bottom: auto;
} ps.: also I've removed the I've found this that speask against using ps.: This is a whole change: https://github.com/ckeditor/ckeditor5-ui/compare/i/1053?expand=1 - I this works on my machine though. |
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. |
Fix: Use relative positioning for dropdowns to prevent ugly blurring in Chrome. Closes ckeditor/ckeditor5#1053.
Thank you all for the feedback! |
🐞 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.
The text was updated successfully, but these errors were encountered: