WebGL content can fail to show up immediately on Edge

[ianmackenzie]

This was first reported at ianmackenzie/elm-3d-scene#87 but seems to be a general WebGL issue. On some versions of Microsoft Edge (tested on version 44.19041.1.0 on Windows 10), replacing a general HTML element with a WebGL canvas some time after the Elm app has started results in the WebGL scene not actually being displayed until a redraw is triggered (window resize, user drags the mouse over the canvas element, etc.).

SSCCE is at https://ellie-app.com/9tMP6X3FjVTa1. The expected behavior is that the page will display "Loading..." for 1 second and then switch to a blue square. On Edge, this can fail and the text disappears but the blue square does not appear until the page is resized or a redraw is otherwise forced. Replacing the Html.text "Loading..." with a dummy WebGL scene like

WebGL.toHtml
    [ Html.Attributes.width 300
    , Html.Attributes.height 300
    ]
    []

fixes the issue, so it seems to be a problem when the virtual DOM replaces a non-WebGL element with a WebGL one.

[w0rm]

This looks like Edge rendering bug. A possible fix could be to trigger repaint for the canvas element on the first draw. This worked for me in Edge:

However I am not sure about this, because this has performance impact for all browsers.