Asyncdisplaykit: [ASNetworkImageNode] image sometimes appearing with black background or completely disappearing

[mikemeko]

We are using ASNetworkImageNode to load an image from the web, by setting the URL property. In our use case, we have an ASTableView in which we have custom ASCellNodes. Each of the CellNodes has an ASNetworkImageNode. Typically there are very many cell nodes in the table, say ~50. What we noticed is that when scrolling very quickly up and down the table, we sometimes notice some of the images either appearing with a black background, or not appearing at all.

[appleguy]

What version of the framework are you using? If you're not using Master, please try again and let me know what happens.

We are using this component in dozens of places in Pinterest, and have not experienced any issues of this nature. It is possible that you are on a version of the framework with a serious bug, or there is some kind of configuration problem with your hierarchy or layout code. Does the structure of your cell contain any regular View objects?

[mikemeko]

It looks like we're using v1.9.6.

The cell is only composed of AsyncDisplayKit nodes, and does not include any regular view objects.

[jmig]

TL,DR: @appleguy The black background is the result of an unexpected isOpaque value to be YES instead of NO.

I'm sharing the results of my investigation so far:

In ASImageNode.mm, drawParametersForAsyncLayer: will use self.opaque to define the value that will be used to actually create the context in displayWithParameters:isCancelled:

On an ImageNode, by default opaque is NO (defined in init, and it seems that there is a TODO regarding this block of code) so if you display a PNG with alpha, it will actually be rendered correctly without doing anything.

I notice the black background issue on scrolling up & down in an ASTableView, so I wonder if there is something related to ASRangeController.

Anyway, at some point the layer will have an opaque value set to YES, and so will lead to the black background issue.
I couldn't find yet what was triggering that change in the layer (again might be related to ASRangeController cleaning up things).

I also notice that setting a backgroundColor prevents the change on isOpaque from NO to YES. (Even if the background color is clearColor). That may be pure luck or that might ring a bell to you!

I'll continue to investigate in the following days, let me know if you think of something that might be related to what I observed,

Thanks!