Ruby on Rails | Screencasts | Download | Documentation | Weblog | Community | Source

Ticket #6735 (new defect)

Opened 1 year ago

[PATCH] BlindUp flicker in IE6 (script.aculo.us and Prototype from 1.2-rc1)

Reported by: michael Assigned to: Rails
Priority: normal Milestone: 1.2.7
Component: script.aculo.us Version:
Severity: major Keywords:
Cc:

Description

In IE6 the BlindUp-effect causes a flicker at the end of the movement (accordingly at the beginning when using the BlindDown-effect). It is very easily triggered by a page, using a simple div with text inside. I know there are workarounds, but IMHO this should work out of the box. I have attached a patch which sets the end of the scaling to 1 instead of 0. I have not experienced any negative side-effects on other browsers when testing in Firefox 2, Opera 9 on Windows and Firefox 2 on Linux. Thank you Thomas and others for your great work!

File necessary for triggering the described effect:

<?xml version="1.0" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<%= javascript_include_tag :defaults %>
<title>Test-Page</title>
</head>
<body>
<%= link_to_function "BlindUp", "$('test').visualEffect('BlindUp');" %>
<%= link_to_function "BlindDown", "$('test').visualEffect('BlindDown');" %>
<div id="test" width="300">Lorem ipsum<br /> 
Lorem ipsum<br />
Lorem ipsum<br />
Lorem ipsum
</div>
</body>
</html>

Patch:

--- original/public/javascripts/effects.js      2006-11-29 23:46:52.000000000 +0100
+++ test/public/javascripts/effects.js  2006-11-29 23:26:08.000000000 +0100
@@ -617,7 +617,7 @@
 Effect.BlindUp = function(element) {
   element = $(element);
   element.makeClipping();
-  return new Effect.Scale(element, 0,
+  return new Effect.Scale(element, 1,
     Object.extend({ scaleContent: false,
       scaleX: false,
       restoreAfterFinish: true,
@@ -634,7 +634,7 @@
   return new Effect.Scale(element, 100, Object.extend({
     scaleContent: false,
     scaleX: false,
-    scaleFrom: 0,
+    scaleFrom: 1,
     scaleMode: {originalHeight: elementDimensions.height, originalWidth: elementDimensions.width},
     restoreAfterFinish: true,
     afterSetup: function(effect) {