AJAX effects not smooth on Rails

Rails
1

I’ve been playing around with AJAX effects using
ActionView::Helpers::ScriptaculousHelper. When I implement these
‘freehand’ on a regular html page the Scriptaculous effects are smooth.
However when I use them rails methods they are not.

For example Appear, Grow and Slideup all blink the text at the start.
As in the content appears for a split second, then disappears and then
the effect kicks in.

Highlight will stutter a bit as it fades.

Is anyone else experiencing these problems? Or am I implementing them
wrong?

Thanks.

2

I must admit I have the same problem.
I noticed when I was using other browsers then Safari.
In Safari its as smooth as silk but Firefox, Camino stutter.
Specialy in :fade div and :appear some other div which is a nice effect.

3

I’ve had issues with all the browsers, including Safari, which was slow
as
molasses with regards to drag and drop effects.

IE has a problem with sliding divs up and down – content below
sometimes
gets transposed onto other content.

Firefox seems to do the best, but yeah it’s got flickering problems,
too.
And in FF on OS X, issuing a :fade causes ALL the text on a page to fade
a
bit while the effect is occuring.

As far as fixes, I have none. I deal with them or try not to use them as
much.

  • D
4

Had this problem yesterday, eventually tracked down the fix:

Those experiencing a flicker with their blinddown using IE6 can find
explanation here:

http://lists.rubyonrails.org/pipermail/rails-spinoffs/2005-September/000861.html

Basically, ie6 doesnâ??t like 0 height. So change the binddown function in
effects.js to:

Effect.Blind Down? = function(element) { element = $(element); var
elementDimensions = element.getDimensions(); return new
Effect.Scale(element, 100, Object.extend({ scaleContent: false, scaleX:
false, scaleFrom: 0, scaleMode: {originalHeight:
elementDimensions.height, originalWidth: elementDimensions.width},
restoreAfter Finish: true, afterSetup: function(effect) {
effect.element.makeClipping(); effect.element.setStyle({height: â??1pxâ??});
effect.element.show(); }, afterFinish Internal?: function(effect) {
effect.element.undoClipping(); } }, arguments1 || {}) );
}

And change the start of:

setDimensions: function(height, width) {
var d = {};

To: setDimensions: function(height, width) { var d = {}; width =
Math.round(width) || 1; height = Math.round(height) || 1;

I used this fix and it works well. The same method can probably be
applied to fix the problem with the flicker when using the Slide Down?
function in IE.

worked fine for me in FF and IE