Bug Tracker

Opened 11 years ago

Closed 11 years ago

Last modified 8 years ago

#3265 closed bug (fixed)

Critical error raised when animating VML

Reported by: westonruter Owned by: john
Priority: major Milestone: 1.3.2
Component: selector Version: 1.3.1
Keywords: msie, vml, animation Cc: westonruter, flesler
Blocked by: Blocking:

Description

In MSIE 7 (at least) an error is raised when this jQuery is executed:

$('#vml-image').animate({rotation:'360deg'});

The error first occurs on line 1407 (and then subsequently on line 1162) and is described simply as "Failed". It is raised when an animation is attempted and then subsequently whenever the page is unloaded (even after the page is reloaded) until the entire browser is closed and restarted.

http://weston.ruter.net/projects/test-cases/jquery-vml-bug/

Change History (10)

comment:1 Changed 11 years ago by flesler

Cc: westonruter flesler added
Component: corefx

comment:2 Changed 11 years ago by fansipans

This also impacted me when using the "DD Roundies" script library, which relies on VML, see example error (in IE6 and IE7) here: http://pastebin.com/f4175991b

It appears that certain elements being manipulated throw exceptions when any properties are accessed - not returning undefined, just throwing exceptions. Perhaps a guard could be placed in Sizzle where elements are first grabbed from the browser to ignore these nodes?

comment:3 Changed 11 years ago by Nikola

There is a similar problem with the Cornerz plug-in and the UI Dialog. When inserting VML into MSIE all js breaks and the browser must be restarted in order to clear the problem.

Minimal Test Case http://paste.pocoo.org/show/102218/

UI Development Ticket http://dev.jqueryui.com/ticket/4020

UI Discusison http://groups.google.com/group/jquery-ui/browse_thread/thread/259fd784e4b454f9

Cornerz Discussion http://groups.google.com/group/cornerz/browse_thread/thread/95ed7ffaafd022b3

comment:4 Changed 11 years ago by mgl

I've found something that may be the source of the problem. IE doesn't seem to like Sizzle.selectors.filters.visible when I'm working with VML. The solution I came up with is a bit absurd, but I've run into a few problems where IE seems to throw up if you use certain words as properties of objects (among other issues):

Rename

Sizzle.selectors.filters.visible

to

Sizzle.selectors.filters.isVisible

Then add the following to the beginning of jQuery.fn.is (at line 394):

if (typeof(selector)=="string") 
	selector = selector.split(":visibl").join(":isVisibl");

Is it just me, or is this a bit crazy?

comment:5 Changed 11 years ago by john

Component: fxselector
Milestone: 1.31.3.2
Owner: set to john
Version: 1.2.61.3.1

That's definitely crazy. A test case here would be immensely useful in drilling down to find what the problem is.

comment:6 Changed 11 years ago by mgl

Ok...here's a test case, similar to the one I posted in the Sizzle discussion:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>VML Bug</title>
		<link rel="stylesheet" type="text/css" href="../css/ui.all.css" />
		<script type="text/javascript" src="../js/jquery/jquery-1.3.1.js"></script>
		<script type="text/javascript" src="../js/jquery/ui/ui.core.js"></script>
		<script type="text/javascript" src="../js/jquery/ui/ui.draggable.js"></script>
		<script type="text/javascript" src="../js/jquery/ui/ui.resizable.js"></script>
		<script type="text/javascript" src="../js/jquery/ui/ui.dialog.js"></script>
		<script>
		
			$(document).ready(function(){
				
				$("<div></div>").dialog();
				
				var canvas1 = $("#canvas1");
				
				initVML();
				
				var geom = canvas1.get(0).appendChild(document.createElement("v:shape"));
				geom.style.width=canvas1.css("width");
				geom.style.height=canvas1.css("height");
				geom.coordsize = parseInt(canvas1.css("width"))+","+parseInt(canvas1.css("height"));
				var fill = geom.appendChild(document.createElement("v:fill"));
				fill.color = "#0F0";
				var stroke = geom.appendChild(document.createElement("v:stroke"));
				stroke.weight = 2;
				stroke.color = "#00F";
				
				geom.path.value = "M 10 10 L 10 100 100 100 100 10 X";
				
			});
			
			
			initVML = function(){
				var nsLoaded = false;
				$.each(document.namespaces,function(i,v){
					if (v.urn=="urn:schemas-microsoft-com:vml")
					{
						nsLoaded = true; return false;
					}
				});
				
				if(!nsLoaded)
				{
					document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
					var style = document.createStyleSheet();
					style.addRule('v\\:*', "behavior: url(#default#VML); position: absolute; display: inline-block;");
				}
			}
			
		</script>
	</head>
	<body>
		<div id="canvas1" style="position:absolute;width:500px;top:10px;left:100px;height:200px;"></div>
	</body>
</html>

comment:7 Changed 11 years ago by mgl

Ok...in ui.dialog.js (1.6rc6), line 188, there is a selector with :visible. I took that selector out, and the sample above works fine.

comment:8 Changed 11 years ago by mgl

To simplify the test case above, you can take the dialog entirely out of the equation, and replace the ready function with this:

$(document).ready(function(){
	var canvas1 = $("#canvas1");
	initVML();
	var geom = canvas1.get(0).appendChild(document.createElement("v:shape"));
	var x = $(':visible');
});

The error will now happen immediately when the page is loaded

comment:9 Changed 11 years ago by mgl

Just another note - I seem to have found that the hidden filter has the same issue, and needs the same fix.

comment:10 Changed 11 years ago by john

Resolution: fixed
Status: newclosed

Fixed in SVN rev [6210].

Note: See TracTickets for help on using tickets.