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

        Ken Fyten created issue -
        Ken Fyten made changes -
        Field Original Value New Value
        Salesforce Case []
        Fix Version/s 2.1 [ 10241 ]
        Assignee Priority P2
        Assignee Arturo Zambrano [ artzambrano ]
        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.
        Ken Fyten made changes -
        Salesforce Case []
        Assignee Arturo Zambrano [ artzambrano ] Mark Collette [ mark.collette ]
        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.
        Ken Fyten made changes -
        Fix Version/s 3.1 [ 10312 ]
        Fix Version/s 3.0 [ 10241 ]
        Ken Fyten made changes -
        Salesforce Case []
        Fix Version/s 3.0 [ 10241 ]
        Fix Version/s 3.1 [ 10312 ]
        Ken Fyten made changes -
        Salesforce Case []
        Assignee Mark Collette [ mark.collette ] Nils Lundquist [ nils.lundquist ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #26773 Wed Dec 07 13:38:37 MST 2011 nils.lundquist ICE-7435 - Flickering TabSet fixed by refactoring transition from YUI controlled for all cases, to skipping YUI transition for server side tabsets, and letting the server request transition itself. Applied opacity %40 to tabset contents that are "stale" while their tab click to a new tab is processed.
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
        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.
        Nils Lundquist made changes -
        Status Open [ 1 ] Resolved [ 5 ]
        Resolution Fixed [ 1 ]
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #26795 Thu Dec 08 15:10:03 MST 2011 nils.lundquist Fix for ICE-7435 when using cached tabs.
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
        Repository Revision Date User Message
        ICEsoft Public SVN Repository #26799 Thu Dec 08 16:02:21 MST 2011 nils.lundquist Further improvement for ICE-7435 / ICE-7450 when using cached tabs.
        Files Changed
        Commit graph MODIFY /icefaces3/trunk/icefaces/ace/component/resources/icefaces.ace/tabset/tabset.js
        Ken Fyten made changes -
        Fix Version/s 3.0.RC2 [ 10313 ]
        Ken Fyten made changes -
        Status Resolved [ 5 ] Closed [ 6 ]

          People

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

            Dates

            • Created:
              Updated:
              Resolved: