ICEfaces
  1. ICEfaces
  2. ICE-7435

ace:tabSet "flickers" when used in server mode

    Details

    • Type: Improvement Improvement
    • Status: Closed
    • Priority: Major Major
    • Resolution: Fixed
    • Affects Version/s: 2.1-Beta
    • Fix Version/s: 3.0.RC2, 3.0
    • Component/s: ACE-Components
    • Labels:
      None
    • Environment:
      ICEfaces 2, ace:tabSet
    • Assignee Priority:
      P2

      Description

      When using the ace:tabSet component in the default "server" mode it appears to "flash" when a tab is selected.

      I believe what is happening is that the tabSet is resized briefly to match the empty tabPane contents panel when a new tab is selected, then sizes again larger once the tabPane content arrives. To alleviate this issue, the tabSet size should be made to remain the same as the previously selected tabPane until the new tabPane is loaded.

      Another possibility is to set the height of the tabSet using CSS to a fixed size that won't vary between tabs.?

        Activity

        Hide
        Mark Collette added a comment -

        Ideally, the new tab contents would come in from the server, and then any animation from one to the other would run, or no animation, and no resiing down to an empty size would happen.

        When using caching, and revisiting a cached previously visited tab, the tabs are all in the dom, so there shouldn't be flickering. That could be tested to see if it makes the flickering go away. Just as a data point.

        Show
        Mark Collette added a comment - Ideally, the new tab contents would come in from the server, and then any animation from one to the other would run, or no animation, and no resiing down to an empty size would happen. When using caching, and revisiting a cached previously visited tab, the tabs are all in the dom, so there shouldn't be flickering. That could be tested to see if it makes the flickering go away. Just as a data point.
        Hide
        Mark Collette added a comment -

        I had hoped that ICE-6728 would resolve this, but most likely the change from YUI3 loader to YUI2 static loading was sufficient to change the dynamic of what's going on, that new investigation will be necessary. I'd still see if this is an issue of sequencing of operations.

        Show
        Mark Collette added a comment - I had hoped that ICE-6728 would resolve this, but most likely the change from YUI3 loader to YUI2 static loading was sufficient to change the dynamic of what's going on, that new investigation will be necessary. I'd still see if this is an issue of sequencing of operations.
        Hide
        Mark Collette added a comment -

        Using the poc we can see that there is no flicker, even though there is in the showcase. This is because the caching property solves the problem. This indicates that the problem is in how we transition from tab to tab, with the latency of the ajax request to get the new tab content coming in the middle of the transition. If we re-sequence things to first get the new contents, then change to them and then remove the old contents, that might be best.

        From the YUI tabview javascript, there's a hook called beforeChange that might be usable for pre-loading the new tab content in the browser. Or we might simply avoid the dom difference removing the old content, and have that done in javascript, after the transition.

        Show
        Mark Collette added a comment - Using the poc we can see that there is no flicker, even though there is in the showcase. This is because the caching property solves the problem. This indicates that the problem is in how we transition from tab to tab, with the latency of the ajax request to get the new tab content coming in the middle of the transition. If we re-sequence things to first get the new contents, then change to them and then remove the old contents, that might be best. From the YUI tabview javascript, there's a hook called beforeChange that might be usable for pre-loading the new tab content in the browser. Or we might simply avoid the dom difference removing the old content, and have that done in javascript, after the transition.
        Hide
        Ken Fyten added a comment -

        I think we need to use some client-side JS sleight of hand to ensure the tab pane size doesn't change between removing old pane and loading new one.

        Show
        Ken Fyten added a comment - I think we need to use some client-side JS sleight of hand to ensure the tab pane size doesn't change between removing old pane and loading new one.
        Hide
        Nils Lundquist added a comment -

        r26771 - Fixed with refactoring to content transitions. Added opacity effect to contents left in tab while waiting for request to finish and complete transition.

        Show
        Nils Lundquist added a comment - r26771 - Fixed with refactoring to content transitions. Added opacity effect to contents left in tab while waiting for request to finish and complete transition.

          People

          • Assignee:
            Nils Lundquist
            Reporter:
            Ken Fyten
          • Votes:
            0 Vote for this issue
            Watchers:
            0 Start watching this issue

            Dates

            • Created:
              Updated:
              Resolved: