Opened 7 years ago

Closed 6 years ago

#4821 closed Bug (fixed)

Icons in the toolbar are distorted with IE and zoom != 100%

Reported by: alfonsoml Owned by: Saare
Priority: Normal Milestone: CKEditor 3.5
Component: UI : Toolbar Version: 3.0.1
Keywords: IE Cc:

Description

as reported in http://cksource.com/forums/viewtopic.php?p=43055#p43055 using IE with a zoom level different than 100% will distort the icon images in the toolbar. The problem is also present in the context menu.

But the v2 skin doesn't suffer the problem in the toolbar, I've checked and adding a background color to the

.cke_skin_v2 .cke_button a,
.cke_skin_v2 .cke_button a.cke_off
{
	filter: alpha(opacity=70); /* IE */
	opacity: 0.70; /* Safari, Opera and Mozilla */
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
}

rule fixes the problem. I haven't searched the fix for the context menu.

So the fix would need to find the correct color for the skin (maybe that means problems with Kama) and also the rule to fix the context menus.

Attachments (3)

4821.patch (7.8 KB) - added by Saare 6 years ago.
4821_2.patch (11.3 KB) - added by Saare 6 years ago.
4821_3.patch (15.4 KB) - added by Saare 6 years ago.

Download all attachments as: .zip

Change History (21)

comment:1 Changed 7 years ago by fredck

  • Milestone set to CKEditor 3.3

This looks like the old an known issue related to Clear Type on Windows. In effect, as pointed by the reporter, it's enough to set the background color to workaround it.

comment:2 Changed 7 years ago by alfonsoml

  • Cc Saare added
  • Keywords Confirmed added

#5075 has been marked as dup

comment:3 Changed 7 years ago by fredck

It has nothing to do with ClearType, but the same fix solves the problem.

comment:4 Changed 7 years ago by fredck

  • Milestone changed from CKEditor 3.3 to CKEditor 3.4

comment:5 follow-up: Changed 6 years ago by pwilk

The problem also appears with webkit based browsers. Oryginally bug was reported on http://drupal.org/node/783178 .

comment:6 in reply to: ↑ 5 Changed 6 years ago by alfonsoml

Replying to pwilk:

The problem also appears with webkit based browsers. Oryginally bug was reported on http://drupal.org/node/783178 .

This issue isn't related to webkit at all as the description of the problems is totally different.

comment:7 Changed 6 years ago by garry.yao

The background-color fix proposed by Alfonsoml works, but as we know it's hardly deliverable on kama skin, I can confirm that it's related to the 'block'/'inline-block' display of <a> element, could we look for a way to put the <a> inline and having the inner button displayed as block instead?

comment:8 Changed 6 years ago by Saare

  • Owner set to Saare
  • Status changed from new to assigned

I did some research and found a fix that resolves the issue, I'll post something soon.

Changed 6 years ago by Saare

comment:9 Changed 6 years ago by Saare

  • Keywords Review? added

It might seem a bit weird fix, but it works perfectly.
V2 skin is also affected but the impact is much less drastic.

comment:10 Changed 6 years ago by fredck

  • Keywords Review- added; Review? removed

Interesting solution, and it works "almost" perfectly.

The only problem is IE6. The icons are not broken on that browser. They are not visible anymore.

Considering that this ticket doesn't touch IE6 (as it has no zoom feature, only text size), the proposed patch should not change the current solution we're using for that browser. Note that it still need to be fixed for IE8+Quirks.

Changed 6 years ago by Saare

comment:11 Changed 6 years ago by Saare

  • Keywords Review? added; Review- removed

Targeting the fix only to IE7+.

comment:12 Changed 6 years ago by fredck

  • Milestone changed from CKEditor 3.4 to CKEditor 3.5

comment:13 Changed 6 years ago by tobiasz.cudnik

  • Status changed from review to review_passed

comment:14 Changed 6 years ago by fredck

  • Milestone changed from CKEditor 3.4.1 to CKEditor 3.5

We may be aware of unexpected issues regarding these filters usage. So, I'm re-targeting it just to be sure.

comment:15 Changed 6 years ago by fredck

  • Keywords Confirmed IE? removed
  • Status changed from review_passed to review_failed

Will we have the same issue with IE9? If so, we'll have to add still more CSS code to that browser, and the same to IE10 later, and so on.

So, for now, I would make it a way that the fix is applied to all IEs, and then canceled on IE6 only.

Changed 6 years ago by Saare

comment:16 Changed 6 years ago by Saare

  • Cc Saare removed
  • Keywords IE added
  • Status changed from review_failed to review

comment:17 Changed 6 years ago by garry.yao

  • Status changed from review to review_passed

comment:18 Changed 6 years ago by Saare

  • Resolution set to fixed
  • Status changed from review_passed to closed

Fixed with [5911].

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