No announcement yet.
  • Filter
  • Time
Clear All
new posts

  • Flickering display because of unnecessary SVG reload

    Hi Isomorphic,

    please see this testcase (v11.1p_2018-06-11) and use the two icons in the attachments of this thread (or any other SVG (also without a linked CSS). Unfortunately I can't find any two files named "x_closed.svg" and "x_opened.svg" anywhere online. Could you include SVG versions of your opener/closer-icons in the Tahoe skin, so that these testcases are easier to create in the online showcase?)

    I though it is related to getCellCSSText(), and there is an additional case of this error in my application, but the root cause is already visible here.

    Open the Chrome network tab when using the sample. You will see MANY (like 20) requests for a single group open/close. This does not happen with PNG-opener/closers, like the default ones.
    You can also see the flicking in the video where the icons are removed for a short time.

        ID: "countryList",
        width:500, height:224, alternateRecordStyles:true, canDragSelect: true,
        sortField: 1,
        data: countryData,
    groupIcon: "pathToTheDownloadedImages/group.svg",
            {name:"continent", title:"Continent"},
            {name:"countryCode", title:"Flag", width:50, type:"image", imageURLPrefix:"flags/16/", imageURLSuffix:".png"},
            {name:"countryName", title:"Country"},
            {name:"capital", title:"Capital"},
            {name:"population", title:"Population", type:"number"}
        groupByField: "continent"
        // 2nd level of the problem, not needed now
        getCellCSSText: function (record, rowNum, colNum) {
                if (this.isGroupNode(record)) {
                    return null;//this.Super.getCellCSSText(record, rowNum, colNum);
                else if (this.getFieldName(colNum) == "population") {
                if (record.population > 1000000000) {
                    return "font-weight:bold; color:#d64949;";
                } else if (record.population < 50000000) {
                    return "font-weight:bold; color:#287fd6;";
    Click image for larger version  Name:	Many requests sent.gif Views:	1 Size:	38.4 KB ID:	253595

    Best regards
    Attached Files
    Last edited by Blama; 15th Jun 2018, 12:30. Reason: Link added

  • #2
    Hi Isomorphic,

    this seems to be related to this fixed issue.

    This one is also related but ends in a using of <image>-tag via useImageForSVG.

    Best regards


    • #3
      Your screenshot cuts it off, but we're seeing these as not actual network fetches, but disk cache hits that are reported in this odd way by Chrome.

      As far as the flicker, it's not under our control - it's a browser bug - this is covered in the docs for useImageForSVG.


      • #4
        Hi Isomorphic,

        thanks for the hint on the docs and that this is a browser issue. I did not know this.
        Perhaps it is possible to reduce the amount calls needed to reduce flickering?

        If you replace the groupByField: "continent" by groupByField: "population" you'll notice that the amount of calls on group open/close significantly increases. As almost all icons stay the same, shouldn't there be only "one flickering image change" needed?

        Thank you & Best regards


        • #5
          There is one extra redraw in this use case which we plan to try to eliminate. However there will still be one flicker until browser vendors fix this bug.


          • #6
            Ok, I'll wait for this one.

            For me, there is also a redraw (if that is the root cause) for just hovering the grouping row. This seems to be related to getCellCSSText (because it only happens if I'm using this in my ListGrid), but I have not been able to reproduce in SmartClient, yet (see #1).

            Best regards


            • #7
              You can see in the Developer Console whether this is a redraw - almost certainly not. Most likely, you just have logic calling refreshRow or refreshCell, which replaces the DOM elements of the cell or row and hence would trigger the browser flicker bug.


              • #8
                Upon further investigation, we really can't avoid doing the second redraw during the expansion or collapse of a group row in a grid, unless you want to disable animation (via animateFolders: false). This is because an initial redraw is done to put extra content into the row being expanded so that it can be slid into view, and thus the second redraw is needed at the end to restore the HTML to its expected record-per-table-row configuration.


                • #9
                  Hi Isomorphic,

                  OK, thanks. I'll change that then to all-black PNG. Not a big problem for me. I have another case (non-ListGrid) though, where this is a problem. I'll try to create a testcase.

                  Best regards