Page MenuHomePhabricator

Collapsing mw-collapsible tables is notably delayed (broken animation) in all browsers
Closed, ResolvedPublic

Description

Author: mr.heat

Description:
With class="mw-collapsible" it's possible to create collapsible tables and more. This works in the Opera webbrowser (current 11.51). But there is a strange delay when collapsing the table. It feels like there should be an animation but it is missing for some reason.

When I click "expand" ("Ausklappen" in the German Wikipedia) everything is displayed immediately in the moment I clicked. This is what I expect.

When I click "collapse" ("Einklappen" in the German Wikipedia) the toggle changes to "expand" but the table does not collapse. It collapses about a second later.

What I request is: Collapse the table immediately or at least very fast. I don't care about animations. Animations are always very annoying to me. When I click something it should *do* what I want in the moment I click.


Version: 1.21.x
Severity: normal

Details

Reference
bz31832

Event Timeline

bzimport raised the priority of this task from to Medium.Nov 21 2014, 11:57 PM
bzimport set Reference to bz31832.
bzimport added a subscriber: Unknown Object (MLST).

I don't see how this is related to Opera. When I open that URL in Opera 11.0, by the time it auto-jumps to that section it's already initialized, pre-collapsed and everything for me.

Does it go fast for you in Firefox or Chrome ?

mr.heat wrote:

You are right, same bug in all web browsers (tested with Opera 11, Opera 12, Firefox 7, IE 8). When clicking "collapse" there is a 1 second delay before it collapses.

When clicking "expand" it expands immediately in all browsers.

I'm afraid the delay is by purpose. In Firefox I can see some graphical clutter that probably should "mimic" an animation. The text in the table fades out tediously slow. This does not make any sense (from my point of view) because the table itself is not affected. Only the text fades out. At the end of this fading animation the table is hidden without an animation. I find this very annoying.

Please remove this broken, time wasting animation. It does not work at all in most browsers and is broken in Firefox. It does not make sense to fade out text when the user wants to collapse a table. Fading out letters is no substitution to collapsing a block.

If you insist of using an animation, please, please make it very fast (0.2 seconds or faster).

Think solving Bug 30401 would solve this.

  • This bug has been marked as a duplicate of bug 30401 ***

mr.heat wrote:

An option to turn of all the annoying animations (they are annoying for me) would be nice but does not fix this bug. Animating tables does not work as described if animations are turned on.

Indeed. Making an option to disable animations does not fix the problems that animations are bugging.

Anyway, these are standard jQuery animations and they are working fine for me. I guess the animations are a come heavier depending on the computer graphics performance. Perhaps an upstream issue to look at for the jQuery folks.

Alternatively we could go fancy and use CSS3 for these animation. Which means:

  • old browsers will have no animations = no lagging animations, as they do not support css3
  • modern browsers will have very smooth animations (smoother as with javascript).

The way the tables are animated is wrong. Slower machines (especially IE) barely show the fade-in effect, making it appear as if nothing is happening. Fades should only be used (if at all) on elements with a static size. A more appropriate animation for(un)collapsing tables is the ('height', 'show/hide') method.

So if I understand, the situation is:

  • bug reporter sees either missing or broken fade-out animation
    • no fade-out on Opera
      • it does delay for a bit as if it were doing a fade-out animation
    • very slow fade-out on Firefox

IMO this fade-out looks like crap anyway -- hide/show like this usually should be done with a roll-up -- and should not be used here.

But it seems a bit odd that the fade just _doesn't work_ on Opera, unless something is interfering.

jQuery animates elements by manipulating their CSS properties in 'realtime'. It is not just the speed if the javascript engine that matters, but also the speed of the browser's rendering engine, which is very dependent on the machine's capabilities. Old video cards/drivers are prone to stalling while rendering the animations. Perhaps Opera has trouble calculating the opacity to render the fade effect.

I agree that tables should simply slide up/down in 200ms ('fast').

jQuery doesn't even bother to use requestAnimationFrame yet. There was a bug on it (which was supposedly marked fixed , and a pull request, but it doesn't look like the code has even made it into HEAD of master much less a stable release yet.

mr.heat wrote:

(In reply to comment #9)

But it seems a bit odd that the fade just _doesn't work_ on Opera

No, it does not work in ALL browsers. Nothing is animated in Internet Explorer, nothing is animated in Opera. In Firefox the WRONG property is animated (the color) as explained above multiple times.

This is true for tables. The situation is a bit better for DIV elements, but not much. The animation is also horribly slow, useless, wasting time, and depending on the situation where it's used it's often misplaced, does not make sense, creates graphical clutter, is distracting, flickering, ...

I think you get it. The main reason for adding an animation to mw-collapsible elements is the animation itself. "Look, we are so cool, we can abuse JavaScript to make parts of the site you are reading float around."

  • This bug has been marked as a duplicate of bug 34876 ***

mr.heat wrote:

Why do you think this is a duplicate? Bug 34876 is about performance, this bug is about broken animations.

Create a simple table.

{| class="mw-collapsible"
! Example

-
Example
}

Click "collapse". Nothing happens for about a second. A second later the table collapses. Expanding the same table is not delayed.

My proposed solution is: Simply remove the broken animation code. This will remove the useless delay.

They are both a result of the same cause; the jQuery MakeCollapsible plugin. Therefore closing again, let's keep it central.

  • This bug has been marked as a duplicate of bug 34876 ***

mr.heat wrote:

These are two completely different bugs. Why do you think a bug about bad performance with many collapsible elements is the same as a bug about a broken animation for a single table row?

Because thay are both caused by the same code. Which means that once that code is fixed, BOTH issues will be fixed. Please stop reopening this bug.

  • This bug has been marked as a duplicate of bug 34876 ***

mr.heat wrote:

From what I see in the changesets the broken animation code is not removed.