Skip to content

< IE9 sets width/height attribute once, and doesn't update on other loads #2129

Closed
ibolmo opened this Issue Nov 19, 2011 · 13 comments

3 participants

@ibolmo
MooTools member
ibolmo commented Nov 19, 2011

All non-IE browsers correctly reset an image's width/height after the user has set a new src attribute. I've confirmed with the help of Gonchuki and Sanford from the user mailing list that the soluton is to remove the properties.

Here's a jsfiddle showing the fix.

Element.Properties.src = {
    set: function(src){
       this.src = src;
       return this.removeProperty('width').removeProperty('height');
    } 
};

Here's the fix with boilerplate:

/* <IE> */
if (Browser.ie) Element.Properties.src = {
    set: function(src){
       this.src = src;
       return this.removeProperty('width').removeProperty('height');
    } 
};
/* </IE> */

I need other devs to review the fix and I can create a PR.

@jdalton
jdalton commented Nov 19, 2011

Umm srsly a UA sniff?

@jdalton
jdalton commented Nov 19, 2011

Would feel better if the width/height attributes were removed before the src was set (I know it may be async but it just feels right)

@jdalton
jdalton commented Nov 19, 2011

Also I think a quick review of elements w/ src attributes would be good to see if it makes sense to remove width/height on all of them.

@jdalton
jdalton commented Nov 19, 2011

I remember running into issues similar to this in 2005/2006 and having to come up with a way to find an images natural height/width... will dig a bit later to see what I can come up with.

@ibolmo
MooTools member
ibolmo commented Nov 19, 2011

Yeah the UA sniff was a quick solution, I didn't invest on thinking on the best feature detection.

I'm not against removing the width and height prior to setting the src.

Good call on checking against img tag. Not going to be a problem with 2.0, hehe.

I'll wait for your 2k5/2k6 research, and create the PR afterwards.

@jdalton
jdalton commented Nov 20, 2011

Ok so I did some research and it seems the reason IE isn't changing the image size is that it is automatically assigning it a height/width attribute. The other browsers resize the image because there is no explicitly set dimensions.

Because IE auto adds these attributes it may be tricky to detect if they were explicitly assigned or auto so simply clearing them is not a good idea because they may be added on purpose.

(Maybe adding a dev note somewhere would help)

@ibolmo
MooTools member
@ibolmo
MooTools member
ibolmo commented Nov 23, 2011

@jdalton, @cpojer, and @arian. What'd you think of my last comment.

@jdalton
jdalton commented Nov 24, 2011

+1 for doc note

@arian
MooTools member
arian commented Dec 10, 2011

doc note is fine.

@ibolmo
MooTools member
ibolmo commented Dec 11, 2011

Ok I may have an actual boss solution. Since it's so late, I'll document it and either one of you guys get around to it before I do (or refute it) just follow-up here.

Take a look at: http://jsfiddle.net/XS6Kw/

DOM 2 (or whatever) added a specified attribute to an Attr node. Since IE6 it's been supported. The idea is that there is a way to know if an attribute had been previously been specified by the user. Either by html or programmatically (el.width =). This is by using the specified attribute in the attribute node.

This assumes that Element.set('src') is being used, otherwise burden falls to the developer. Element.set('src', ...) remove attribute nodes width and height (not necessarily mutually) if they haven't been specified. If specified, the question falls to what the other browsers do (TODO). If the user specifies a width attribute and changes the src to a different sized element, I assume that the browser will honor the specified attribute and not look at the new image sizes. Therefore, in IE we'd just let those attributes stick.

That's it for now. It's a good move forward, imo.

@ibolmo ibolmo referenced this issue Dec 12, 2011
Closed

Fixes 2129. #2168

@arian
MooTools member
arian commented Feb 5, 2012

I vote for a doc note. I have to say that I didn't really tested this, but I have this feeling this might open the door for even more bugs and edge cases. As I understand with a documentation note it's not too hard to work around this, as a user.

@ibolmo
MooTools member
ibolmo commented Feb 6, 2012

Going for the doc.

@ibolmo ibolmo closed this Feb 6, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.