#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 15 years ago by
| Cc: | westonruter flesler added |
|---|---|
| Component: | core → fx |
comment:2 Changed 14 years ago by
comment:3 Changed 14 years ago by
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 14 years ago by
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 14 years ago by
| Component: | fx → selector |
|---|---|
| Milestone: | 1.3 → 1.3.2 |
| Owner: | set to 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.
comment:6 Changed 14 years ago by
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 14 years ago by
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 14 years ago by
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 14 years ago by
Just another note - I seem to have found that the hidden filter has the same issue, and needs the same fix.
comment:10 Changed 14 years ago by
| Resolution: | → fixed |
|---|---|
| Status: | new → closed |
Fixed in SVN rev [6210].
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?