search

elm-explorations / webgl

Functional rendering with WebGL in Elm
https://package.elm-lang.org/packages/elm-explorations/webgl/latest/
BSD 3-Clause "New" or "Revised" License
117 stars 17 forks source link

WebGL content can fail to show up immediately on Edge #29

Open ianmackenzie opened 4 years ago

ianmackenzie commented 4 years ago

This was first reported at https://github.com/ianmackenzie/elm-3d-scene/issues/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 commented 4 years ago

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:

Screenshot 2020-07-21 at 22 01 56

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