Opened 7 years ago

Last modified 7 years ago

#9710 confirmed Bug

IE7/8: In Kama skin toolbar buttons are not alpha blended properly and appear blurry until the mouse is hovered over

Reported by: sbranton Owned by:
Priority: Normal Milestone:
Component: UI : Toolbar Version: 4.0
Keywords: Cc:

Description

description of problem can be found at: http://www.jacklmoore.com/notes/ie-transparency-problems

can potentially be resolved be ensuring a background color is specified when doing the alpha blending.

Attachments (6)

image001.png (5.1 KB) - added by sbranton 7 years ago.
Example of blurry toolbar buttons in IE8
patch.diff (28.9 KB) - added by sbranton 7 years ago.
background-color style fix
alphaTest.zip (2.0 KB) - added by sbranton 7 years ago.
Example page illustrating problem along with fix
IconsBeforeFix.png (4.1 KB) - added by sbranton 7 years ago.
The icons as we saw them, one with the mouse hovered...one without
IconsWithFix.png (4.3 KB) - added by sbranton 7 years ago.
The icons as the appear with the background-color set...one with the mouse hovered over
ckeditor.zip (251.9 KB) - added by sbranton 7 years ago.
Example plugin (fullpage.html)

Download all attachments as: .zip

Change History (12)

Changed 7 years ago by sbranton

Attachment: image001.png added

Example of blurry toolbar buttons in IE8

Changed 7 years ago by sbranton

Attachment: patch.diff added

background-color style fix

comment:1 Changed 7 years ago by Jakub Ś

Keywords: IE7 IE8 opacity alpha toolbar kama removed
Status: newpending
Version: 4.0 (GitHub - master)

Any chance for providing sample HTML page showing this problem not just on a screenshot?

Changed 7 years ago by sbranton

Attachment: alphaTest.zip added

Example page illustrating problem along with fix

Changed 7 years ago by sbranton

Attachment: IconsBeforeFix.png added

The icons as we saw them, one with the mouse hovered...one without

Changed 7 years ago by sbranton

Attachment: IconsWithFix.png added

The icons as the appear with the background-color set...one with the mouse hovered over

comment:2 Changed 7 years ago by sbranton

I've attached more screen shots illustrating the problem and our solution further.

I also added a test web page that illustrates the issue as well. If viewed in ie8 or ie7 you will be able to see the issue. This also includes a copy of the images we are using for the tool bar buttons, replacing one of the ckeditor tool bar buttons with one of these images will also allow you to see the problem.

comment:3 Changed 7 years ago by Jakub Ś

I see that you have used background fill to fix your image.

I have also tried using your icons in CKEditor plugins and I didn't get such problems. Icons were not blended like you have described.
Is it possible that this problem occurred only because you have used some custom styles on CKEditor buttons?

comment:4 Changed 7 years ago by Jakub Ś

@sbranton, could I ask for an update to this ticket?

Changed 7 years ago by sbranton

Attachment: ckeditor.zip added

Example plugin (fullpage.html)

comment:5 Changed 7 years ago by sbranton

I've created a plugin to illustrate the example.

In the attached "ckeditor.zip" I've created a very simple plugin to just load the button into the tool bar. I am not using any custom styles. If you open the "fullpage" sample (ckeditor/ckeditor/samples/plugins/wysisygarea/fullpage.html) in IE8 you should see the spell check button we are using. It will appear blurry, but clear up when moused over.

Please note we only see this issue in IE7 and IE8, not on any other browsers. So please be sure to test using either internet explorer 7 or 8.

Thanks.

comment:6 Changed 7 years ago by Jakub Ś

Status: pendingconfirmed
Version: 4.0

Now I can confirm this. It is happening in IE7 and IE8 and only with skin kama.

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