doesn't reproduce for me.

Can you provide a less convoluted test case please?

Some parts of the test case scripts may look redundant or useless, but if I modify a single character from any of the test case scripts provided, the canvas stops disappearing. This bug is probably some kind of race condition or something like that.

Make sure to test the script on Windows x64 using the reported Chrome version. Also, make sure to enable the Internet connection on the machine where the script is being tested, in order to allow the script to cause CORS violation and then to make the canvas disappear.

The issue may not be related to canvas only, but also to other elements, but it is hard to test, because of the instability of the test case.

Thank you for providing more feedback. Adding the requester to the cc list.

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

I do see the CORS violations, but no flickering :/

Not sure what may cause the flickering.
Maybe it is related to graphical driver, so I'm providing gpu.htm file.
It is almost surely a race condition of some sort. If I change timeout from b.js and d.js to 0ms, then no flickering happens.
I can suggest to try to adjust timeouts it b.js, d.js, and c.js scripts in order to fulfill whatever conditions cause flickering.

The canvas disappears at the beginning of loading f.js and appears after loading it, no matter how long the timeout is there. Replacing the timeout in f.js with an infinite loop causes the canvas to stay invisible. Pausing the script using devtools inspector while the canvas is invisible sometimes causes the canvas to appear, sometimes doesn't. Executing `canvas.getClientRects()` on the canvas while it is invisible returns an empty array, but it is present in the elements tab of the devtools and all computed style properties suggest that is should be visible.

If I need to provide any other useful info, let me know.

Deleted: gpu.htm 117 KB

gpu.htm 117 KB View Download

Deleted: screencast.webm 4.2 MB

	screencast.webm 4.2 MB View Download

Is this related to HTML imports?

Here is a very simplified test case. Hope it helps. If still unable to reproduce, try to adjust timeouts.

Deleted: index.htm 871 bytes

index.htm 871 bytes View Download

Deleted: script.js 10 bytes

script.js 10 bytes View Download

Deleted: screencast.mp4 5.1 MB

	screencast.mp4 5.1 MB View Download

I mean, I can imagine that this is a timing issue - document.write() should wipe the DOM, so you do remove the canvas, and add it back later. Flickering is within the realm of what's possible.

I don't think this is related to CORS however.

It took a look at index.html briefly. It is unclear to me how Blink>DOM is related. It looks an timing issue to me.

Re C#10: It's not related to `document.write`. I'm attaching test case without document.write, which still reproduces the flickering.
I did few more tests. Importing resources that allows all origins still causes flickering. I agree that it is probably unrelated to CORS.
It seems that the issue is only related to HTML imports feature.

Deleted: test-case (without document.write).zip 799 bytes

test-case (without document.write).zip 799 bytes Download

appendChild(node) first removes node from its parent, so you're still constantly removing the canvas from the document which I think is what causes the flickering

Yes, but it shouldn't flicker, like it doesn't flicker in other browsers. When JavaScript code gives the control to the event loop, the canvas is already appended. It disappears while loading another script, not while executing the scripts that re-appends it.

We succeeded to create a 100% reproducible test-case. To make it portable, we tested under Windows 10 virtual machine.
The virtual machine can be downloaded here: https://drive.google.com/open?id=1hAorCiVTv06Ej6ZYca_UAkRxvh8nIQpI
VirtualBox is needed to run the machine.

Tested on different host machines and different operating systems. It reproduces everywhere using the provided virtual machine.
Can someone from dev team take a look at the virtual machine and try to run the script from there (environment is already prepared). Once confirmed, this issue can be further triaged.

The issue with disappearing canvas significantly affects some pages, because if page imports external resources multiple times, each time canvas (and probably other elements) disappears. Here we are also providing a screencast on how to run the virtual machine and test the script.

Can someone now confirm the issue? Thanks.

Deleted: 1.mp4 7.5 MB

	1.mp4 7.5 MB View Download

This seems to be more a layout/DOM problem than a canvas. But I'm not sure.

As jochen explained in comment 13 re-adding the canvas to the document first removes it and then re-adds it. That combined with the external stylehseets is what is causing the flickering behavior you're seeing. 

Try to avoid constantly re-adding it or use request animation frame to have more control over when it gets re-painted.