Bug 172969 - Changes to a WebGL canvas and to layer transforms are not always synchronized
Summary: Changes to a WebGL canvas and to layer transforms are not always synchronized
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebGL (show other bugs)
Version: Other
Hardware: iPhone / iPad iOS 10
: P2 Major
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2017-06-06 04:32 PDT by Manuel Baclet
Modified: 2020-11-21 07:54 PST (History)
7 users (show)

See Also:

Video showing display artefacts (3.00 MB, video/mp4)
2017-06-06 04:32 PDT, Manuel Baclet
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Manuel Baclet 2017-06-06 04:32:34 PDT
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:

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.)
Comment 1 Radar WebKit Bug Importer 2017-06-06 17:27:31 PDT
Comment 2 Simon Fraser (smfr) 2017-06-08 15:53:43 PDT
I can reproduce the problem.
Comment 3 Simon Fraser (smfr) 2017-06-08 15:56:41 PDT
I wonder if this is something about delays introduced by flushing layer backing stores.
Comment 4 Manuel Baclet 2017-07-01 04:24:40 PDT
Is there a chance to have this fixed in a near future?
Comment 5 Manuel Baclet 2017-11-03 06:32:48 PDT
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?
Comment 6 Simon Fraser (smfr) 2017-11-03 08:32:50 PDT
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.
Comment 7 Manuel Baclet 2018-03-25 12:28:15 PDT
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?
Comment 8 Praveen Ponnusamy 2018-04-16 19:11:43 PDT
I can reproduce this issue on iOS 11.3 (iPhone 7).
Not reproducible on Safari 11.0.3 on macOS 10.13.3.
Comment 9 Manuel Baclet 2018-04-18 11:08:25 PDT
As far as i know, only iOS is affected by this bug.
Never saw it occur on MacOS (on any navigator).
Comment 10 Manuel Baclet 2019-05-03 00:18:42 PDT
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.