Opened 10 years ago

Closed 10 years ago

Last modified 10 years ago

#10047 closed defect (fixed)

Editor loses the values of width/height attributes on IMG tags in IE

Reported by: Jared Jurkiewicz Owned by: Jared Jurkiewicz
Priority: high Milestone: 1.4
Component: Editor Version: 1.3.2
Keywords: Cc:
Blocked By: Blocking:

Description

Editor loses the values of width/height attributes on IMG tags in IE

This is easily reproducable, just create an editor like:

		<div dojoType="dijit.Editor" id="editor1" disableSpellCheck="true"
			onChange="console.log('editor1 onChange handler: ' + arguments[0])"
		><p>This instance is created from a div directly with default toolbar and plugins</p>
		<img alt="Ambox style.png" height="40" src="http://upload.wikimedia.org/wikipedia/commons/d/d6/Ambox_style.png" width="40" />
		</div>

When you call editor.getValue, you get: <img alt="Ambox style.png" height="0" src="http://upload.wikimedia.org/wikipedia/commons/d/d6/Ambox_style.png" width="0" />

Even stranger is that the outerHTML you get for the string has it correct:

OUTERHTML: <IMG height=40 alt="Ambox style.png" src="http://upload.wikimedia.org/wikipedia/commons/d/d6/Ambox_style.png" width=40> WIDTH: 40 HEIGHT: 40 OUTERHTML: <IMG height=40 alt="Ambox style.png" src="http://upload.wikimedia.org/wikipedia/commons/d/d6/Ambox_style.png" width=40 _djrealurl="http://upload.wikimedia.org/wikipedia/commons/d/d6/Ambox_style.png"> WIDTH: 0 HEIGHT: 0

So the second time when we're building the document to set to editor, we now get '0', because the original node is now hidden. This is a known IE oddity:

http://bytes.com/topic/html-css/answers/163136-display-block-none-fixed-transparency-png-ie

Search for getAttribute.

IE dynamically updates that attribute based on if it's hidden or not at the time. Ugh.

However, since it IS in the outerHTML correctly, we can still get it, we just have to tear it out of outerHTML instead of using getAttribute. It's a kludge, but the bug end result is nasty. Hopefully we can improve on the fix later.

The fix is:

dijit._editor.getNodeHtml

						switch(key){
							case 'style':
								val = node.style.cssText.toLowerCase();
								break;
							case 'class':
								val = node.className;
								break;
							case 'width':
								if(lName === "img"){
									// This somehow gets lost on IE for IMG tags and the like
									// and we have to find it in outerHTML, known IE oddity.
									s.replace(/width=\S+/i, function(match){
										val = match.substring(match.indexOf("=") + 1, match.length);
										return match;
									});
									break;
								}
							case 'height':
								if(lName === "img"){
									// This somehow gets lost on IE for IMG tags and the like
									// and we have to find it in outerHTML, known IE oddity.
									s.replace(/height=\S+/i, function(match){
										val = match.substring(match.indexOf("=") + 1, match.length);
										return match;
									});
									break;
}}}								}

Change History (6)

comment:1 Changed 10 years ago by Jared Jurkiewicz

With my fix applied, I now get:

<img alt="Ambox style.png" height="40" src="http://upload.wikimedia.org/wikipedia/commons/d/d6/Ambox_style.png" width="40" />

Consistently.

comment:2 Changed 10 years ago by liucougar

s.replace(/height=\S+/i, function(match){
	val = match.substring(match.indexOf("=") + 1, match.length);
	return match;
});

this can be simplified to

var match=/height=(\S+)/i.exec(s);
if(match){
	val = match[1];
}

comment:3 Changed 10 years ago by liucougar

rather than doing this trick, how about moving the original document off-screen (so user won't see it), but don't set its display to none, this should fix this IE bug as well, and we don't need to have more logic in the js code (I think it may actually break other things in IE as well, so moving it offscreen may be better)

comment:4 Changed 10 years ago by Jared Jurkiewicz

Resolution: fixed
Status: newclosed

(In [20457]) Fix IE's horrible handling of IMG tag width/height. fixes #10047

comment:5 Changed 10 years ago by Jared Jurkiewicz

(In [20458]) More optimized version of extracting the value. Thanks Liu! refs #10047

comment:6 Changed 10 years ago by Jared Jurkiewicz

liu: Feel free to prototype doing that out. I wanted to get a fast fix in that touched as little of code as possible. :-)

Note: See TracTickets for help on using tickets.