Ticket #4771 (closed bug: fixed)

Opened 5 years ago

Last modified 3 years ago

Tabs: Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx

Reported by: robertstrait Owned by:
Priority: major Milestone: 1.8.5
Component: ui.tabs Version: 1.7.2
Keywords: tabs rotate opacity toggle Cc: mjaspan@…
Blocking: Blocked by:

Description

 http://lefcms.lef.org/jquery

We're using JQuery and specifically the Tabs module to handle our interactive 'panels' on our home page (see URL for example). We've also implemented a rotator to cycle them automatically. However, with these together and using the opacity toggle fx, we encounter results that are undesirable - when clicking the tabs while handling the fade in/out, it can end up mistakenly displaying/stacking two tab simultaneously.

This is producible two ways - either waiting for a tab to begin loading and clicking a different one at the right time, or simpler, clicking a new tab and then a third while the second is loading. To see this on our staging URL, load the page and quickly click the tabs in this order - 2, 3, 2 and you should see the problem.

We're using this javascript to enable the functionality:

    jQuery(document).ready(function($) {
      $('#tabsMain').tabs({ fx: { opacity: 'toggle'} }).tabs('rotate', 5000);
    });

When we remove the 'fx: opacity: toggle' bit, we cannot reproduce the issue indicating the instability comes while its handing the timed fade in/out:

    jQuery(document).ready(function($) {
      $('#tabsMain').tabs().tabs('rotate', 5000);
    });

Any help that can be provided would be wonderful - TIA!

Change History

comment:1 Changed 5 years ago by scott.gonzalez

  • Component changed from effects.* (individual effect) to ui.tabs
  • Milestone changed from TBD to 1.8

comment:2 follow-up: ↓ 3 Changed 4 years ago by cmcculloh

This has nothing to do with the rotate option. The fx: { opacity: 'toggle' } is definitely the culprit here.

See it in action:

working (without fx):  http://pastebin.me/4955ecf57e4b13b928c2bc40ef77da23 broken (with fx):  http://pastebin.me/4955ecf57e4b13b928c2bc40ef77da23

comment:3 in reply to: ↑ 2 Changed 4 years ago by cmcculloh

Replying to cmcculloh:

Somehow I screwed up the "broken" link. Here it is:  http://pastebin.me/503949a358ea13747f568a7ffd58ef13

Also, for clarification, when you open the "broken" link, click frantically on all of the different tabs. In very short order you will see duplicate content, or "stacked" content (happens in chrome 6.0.472.36 beta and FF 3.6.8 and probably more but didn't test others)

comment:4 Changed 4 years ago by cmcculloh

Fixed.

 http://github.com/cmcculloh/jquery-ui/commit/371bc6c8b66ce35d05aa0da88f290e2e7e5f0fb3

Added a check to determine:

  1. If fx are being used (as this is the only time this bug occurs)
  2. If one tab is rotating (transitioning) to another tab

If so, it locks tabs so that clicking on them doesn't do anything.

I'm sure there is a better way to do this, but this is the best I have time for. Maybe someone else can use this as a jumping off point.

comment:5 Changed 4 years ago by cmcculloh

Fixed it better.

 http://github.com/cmcculloh/jquery-ui/blob/a30975da6847d5a947f0c0f05f5ddd7150d54df2/ui/jquery.ui.tabs.js

The fix checks to see if an animation is in progress, and if so it ignores clicks on tabs.

Issued pull request.

comment:6 Changed 4 years ago by scott.gonzalez

  • Status changed from new to closed
  • Resolution set to fixed
  • Summary changed from Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx to Tabs: Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx

Fixed in  8f22b2b.

comment:7 Changed 4 years ago by scott.gonzalez

  • Milestone changed from 1.9 to 1.8.5

comment:8 Changed 3 years ago by Christopher McCulloh

Tabs: Prevent opening a tab while panels are being animated. Fixes #4771 - Tabs: Occassionally displays multiple tabs when clicked with rotate control using opacity toggle fx.

Changeset: 8f22b2b6b3e7ecf0b1f49f81e1fd65e5b2c7a9cb

Note: See TracTickets for help on using tickets.