Opened 5 years ago

Closed 5 years ago

#11542 closed Bug (fixed)

[IE11] Blurry icons in RTL editor

Reported by: Olek Nowodziński Owned by: Olek Nowodziński
Priority: Normal Milestone: CKEditor 4.3.3
Component: UI : Toolbar Version:
Keywords: Cc:

Description

  1. Open samples/uilanguages.html
  2. Change language to Hebrew/Arabic.
  3. Note blurry icons in the toolbar.

Attachments (3)

ie11_rtl_blurry.png (90.3 KB) - added by Olek Nowodziński 5 years ago.
ie11_rtl_blurry_zoomed.png (1.5 KB) - added by Olek Nowodziński 5 years ago.
radius.gif (43.3 KB) - added by Olek Nowodziński 5 years ago.

Download all attachments as: .zip

Change History (9)

Changed 5 years ago by Olek Nowodziński

Attachment: ie11_rtl_blurry.png added

Changed 5 years ago by Olek Nowodziński

Attachment: ie11_rtl_blurry_zoomed.png added

comment:1 Changed 5 years ago by Olek Nowodziński

comment:2 Changed 5 years ago by Piotrek Koszuliński

Status: newconfirmed

comment:3 Changed 5 years ago by Olek Nowodziński

Owner: set to Olek Nowodziński
Status: confirmedassigned

Changed 5 years ago by Olek Nowodziński

Attachment: radius.gif added

comment:4 Changed 5 years ago by Olek Nowodziński

Status: assignedreview

It took me a while to figure it out, but finally I found the root of the problem, precisely those mysterious lines in toolbar.css and a bug in IE11 which makes background-image blurry when border-radius is set (sic!).

At first I was not able to reveal the mystery of that RTL-specific CSS because git blame is useless in this case. It looked like a dead piece code for me. Eventually I figured out that those rules are to make a.cke_button rounded if it's the first/last child of .cke_toolgroup. Without those CSS, .cke_toolgroup's border, which is also rounded, would be distorted by children.

However, the selector .cke_rtl .cke_toolgroup *:(first|last)-child is greedy: it also selects .cke_button_icon which is the first-child of .cke_button (IE11 "blur-bug" kicks in). Additionally, for unknown reason, the rule existed for RTL editors only while the issue (distorted .cke_toolgroup's border) is also visible in LTR.

I created branch t/11542 which does the following:

  • Fixes the greedy selector (the blur is gone).
  • Applies the fix to LTR editors.

comment:5 Changed 5 years ago by Piotrek Koszuliński

Status: reviewreview_passed

comment:6 Changed 5 years ago by Olek Nowodziński

Resolution: fixed
Status: review_passedclosed

git:4a3ae1a landed in master.

Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy