#3265 closed bug (fixed)

Opened August 20, 2008 12:23AM UTC

Closed February 16, 2009 03:53PM UTC

Last modified March 14, 2012 04:39PM UTC

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/

Attachments (0)

Change History (10)

Changed August 20, 2008 04:23PM UTC by flesler comment:1

cc:	→ westonruter, flesler
component:	core → fx

Changed January 23, 2009 04:00PM UTC by fansipans comment:2

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?

Changed February 04, 2009 12:22AM UTC by Nikola comment:3

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

Changed February 12, 2009 06:04PM UTC by mgl comment:4

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

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?

Changed February 13, 2009 03:15AM UTC by john comment:5

component:	fx → selector
milestone:	1.3 → 1.3.2
owner:	→ john
version:	1.2.6 → 1.3.1

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

Changed February 13, 2009 03:39AM UTC by mgl comment:6

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>

Changed February 13, 2009 04:20AM UTC by mgl comment:7

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.

Changed February 13, 2009 11:16PM UTC by mgl comment:8

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

Changed February 16, 2009 02:31AM UTC by mgl comment:9

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

Changed February 16, 2009 03:53PM UTC by john comment:10

resolution:	→ fixed
status:	new → closed

Fixed in SVN rev [6210].

Side navigation