Bug 172969 – Changes to a WebGL canvas and to layer transforms are not always synchronized

• Component: WebGL
• Status: NEW

[Manuel Baclet]

Created attachment 312066 [details]
Video showing display artefacts

On https://manubb.github.io/Leaflet.PixiOverlay/ios.html , flicker occurs on the circle and the triangle with iOS 9.3.5 (iPhone 4S) and iOS 10.3.2 (iPad Air 2) when rendered in WebGL. 

The problem is not present on:
- Fedora 25 (Chrome, Firefox, Opera)
- MacOS 10.11 and 10.12 (Chrome, Firefox, Opera, Safari)
- Chrome book with last Chrome version

The problem does not occur when using a canvas renderer as in:
https://manubb.github.io/Leaflet.PixiOverlay/ios-canvas.html

A video showing the display artefacts is attached. 
 
(During a move, the WebGL canvas is translated and never refreshed. At the end of a move, its position is reset and its content is refreshed so that the geometries appear at their right places. Somehow, the canvas refreshing is not synchronized with the position update.)

[Radar WebKit Bug Importer]

<rdar://problem/32602729>

[Simon Fraser (smfr)]

I can reproduce the problem.

[Simon Fraser (smfr)]

I wonder if this is something about delays introduced by flushing layer backing stores.

[Manuel Baclet]

Is there a chance to have this fixed in a near future?

[Manuel Baclet]

Support of WebGL has improved in iOS 11 but unfortunately, this bug is still present. I think i'll have a look into the source code but i need some help:
- can you tell me where i should look?
- is there a simple reason that explains the different behaviors in iOS and MacOS?
Thanks

[Simon Fraser (smfr)]

This will be a non-trivial bug to investigate, and will require understanding of how frame generated by WebGL are presented by the the underlying frameworks.

[Manuel Baclet]

A little up as the problem is still unsolved. Is there a chance that WebGL2 implementation will improve the situation?

Do you have an idea why canvas rendering is not affected and why this occurs on iOS Safari and not in macOS Safari?

[Praveen Ponnusamy]

I can reproduce this issue on iOS 11.3 (iPhone 7).
Not reproducible on Safari 11.0.3 on macOS 10.13.3.

[Manuel Baclet]

As far as i know, only iOS is affected by this bug.
Never saw it occur on MacOS (on any navigator).

[Manuel Baclet]

I gave a new try yesterday on an iPad Air 2 with iOS 12.2 and i obtained exactly the same result both in webGL and webGL2. 
This issue has been opened for almost two years and there has been no real progress afaik.

This problem only occurs in iOS. (Everything is fine on low end android devices, for instance.)

Just wondering if opening an issue here has any use except wasting time and energy.

[nate]

(In reply to Manuel Baclet from comment #0)
> Created attachment 312066 [details]
> Video showing display artefacts
> 
> On https://manubb.github.io/Leaflet.PixiOverlay/ios.html , flicker occurs on
> the circle and the triangle with iOS 9.3.5 (iPhone 4S) and iOS 10.3.2 (iPad
> Air 2) when rendered in WebGL. 
> 
> The problem is not present on:
> - Fedora 25 (Chrome, Firefox, Opera)
> - MacOS 10.11 and 10.12 (Chrome, Firefox, Opera, Safari)
> - Chrome book with last Chrome version
> 
> The problem does not occur when using a canvas renderer as in:
> https://manubb.github.io/Leaflet.PixiOverlay/ios-canvas.html
> 
> A video showing the display artefacts is attached. 
>  
> (During a move, the WebGL canvas is translated and never refreshed. At the
> end of a move, its position is reset and its content is refreshed so that
> the geometries appear at their right places. Somehow, the canvas refreshing
> is not synchronized with the position update.)