Flickering display because of unnecessary SVG reload

[Blama]

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.

Issue:
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.

isc.ListGrid.create({
    ID: "countryList",
    width:500, height:224, alternateRecordStyles:true, canDragSelect: true,
    sortField: 1,
    data: countryData,
[B]groupIcon: "pathToTheDownloadedImages/group.svg",[/B]
    fields:[
        {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;";
            }
        }
    }
    */
})

Best regards
Blama

[Blama]

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
Blama

[Isomorphic]

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.

[Blama]

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
Blama

[Isomorphic]

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.

[Blama]

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
Blama

[Isomorphic]

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.

[Isomorphic]

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.

[Blama]

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
Blama

[Isomorphic]

You may have observed that the flickering for object tag SVG reloads is much reduced (though not entirely gone) in FF60ESR vs. FF52ESR, so Firefox has made progress.

The problem is still pretty bad with Chrome so you may wish to star the associated bug here, which reports the issue as a caching problem for SVG in object tags. (If caching of SVG in object tags were improved it would likely also resolve the visible flickering.)

[Blama]

Hi Isomorphic,

I don't see a difference between FF61.0.1 and Chromium 68.0.3440.106 in my application using v11.1p_2018-08-04 (is this the correct version? Or do you mean in 12.0?), but will definitely star that issue.

Thank you & Best regards
Blama

[Blama]

Just did. I assume from the date of the post #4 and the contents that this one is yours, right?
Is there anything else I could do?

Best regards
Blama

[Isomorphic]

Hi Isomorphic,

I don't see a difference between FF61.0.1 and Chromium 68.0.3440.106 in my application using v11.1p_2018-08-04 (is this the correct version? Or do you mean in 12.0?)

We observed the difference in 12.1d where the "pointer-events:none" CSS issue was resolved, and across Windows, Linux, and OS X, but it should be the same in all branches as it wasn't related to that change.

Just did. I assume from the date of the post #4 and the contents that this one is yours, right?
Is there anything else I could do?

You might want to post your actual experience in the defect comments, saying how it affects you, as that may increase the impact.

Then, since you're still affected badly in Firefox, you might want to file a bug against Firefox as well here. If we can get one of the browsers fixed, the others will face increased pressure to also resolve this.

[Blama]

Anyone interested in getting the underlying browser bugs fixed, these are the issues in the respective bug trackers: Chromium, Firefox.

Best regards
Blama

[mathias]

Hi, we've tried the last week to migrate to SVG for some stuff and encountered flickering right away in both Firefox and Chrome, looks pretty bad (works fine in Safari). This makes SVG unusable, doesn't it? Sounds crazy to me, do you know if they're working on it?