Opened 9 years ago

Last modified 9 years ago

#12610 confirmed Bug

checkElementMatch always return false for color style in IE11

Reported by: Irina Owned by:
Priority: Normal Milestone:
Component: Core : Styles Version: 4.0 Beta
Keywords: IBM IE Cc: Satya Minnekanti


  1. Open sample page
  2. Start typing, e.g. abc
  3. Observe elements path bar

Actual result: span element gets created on each key press as checkElementMatch return FALSE

Expected result: span element gets created only once on the first key press

This works as expected in FF & Chrome

Attachments (2)

sample.html (1.6 KB) - added by Irina 9 years ago.
IE.png (46.4 KB) - added by Jakub Ś 9 years ago.

Download all attachments as: .zip

Change History (9)

Changed 9 years ago by Irina

Attachment: sample.html added

comment:1 Changed 9 years ago by Jakub Ś

Problem can be reproduced from CKEditor 4.0 beta in IE9-11.

Last edited 9 years ago by Jakub Ś (previous) (diff)

comment:2 Changed 9 years ago by Jakub Ś

Keywords: IE added
Version: 4.0 Beta

comment:3 in reply to:  1 Changed 9 years ago by Irina

Replying to j.swiderski:

Problem can be reproduced from CKEditor 4.0 beta in IE9-11.

I believe the problem are below two lines:

var selection = editor.getSelection().getRanges()[0];
var parentNode = selection.endContainer.getParent();

The parentNode for IE is body while for other browsers like Chrome it is span.

I'm not sure whether this is bug (could be because same method returns different results) or simply a matter of using slightly different api for IE (it is know that browsers handle native selection differently).

For the first character typed parentNode is body in all browsers. For the second character parentNode is span in IE/FF/Chrome as expected. So for the second character

style.checkElementMatch(parentNode, true, editor)

should return true but it returns false in IE. The false value returned only if style contains a color attribute. If you will change style to font-family/font-size instead of the color then all browsers return true for checkElementMatch.

comment:4 Changed 9 years ago by Jakub Ś

@irina you are right. I haven't checked this properly thus I have modified my previous comment to avoid confusion.

comment:5 Changed 9 years ago by Jakub Ś

To fix my previous mistake I have denugged this method.

IMHO the problem is that IE changes #ff0000 to {rgb:(255,0,0) (Please see attached image).

  1. Now, this line returns {rgb:(255,0,0):
    var elementAttr = element.getAttribute( attName ) || '';
  2. Going down in code you will find:
    compareCssText( attribs[ attName ], elementAttr )// #ff0000 rgb:(255,0,0)
  3. The method compareCssText calls method parseCssText in tools.js. The problem is that this method is not called with third parameter which is responsible for converting RGB to HEX. You have something like below:
    source = source );
    target = target, true );

while method parseCssText has:

parseCssText: function( styleText, normalize, nativeNormalize ) {
	if ( nativeNormalize ) {
		styleText = temp.getAttribute( 'style' ) || '' );	

comment:6 Changed 9 years ago by Jakub Ś

Status: newconfirmed

Changed 9 years ago by Jakub Ś

Attachment: IE.png added

comment:7 Changed 9 years ago by Piotrek Koszuliński

Component: GeneralCore : Styles
Note: See TracTickets for help on using tickets.
© 2003 – 2022, CKSource sp. z o.o. sp.k. All rights reserved. | Terms of use | Privacy policy