Bug 180755 - Webgl (threejs) doesn't render in fullscreen when canvas is in div and div brought to FS.
Summary: Webgl (threejs) doesn't render in fullscreen when canvas is in div and div br...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: WebKit Misc. (show other bugs)
Version: Safari 11
Hardware: Macintosh macOS 10.13
: P2 Minor
Assignee: Nobody
Keywords: InRadar
Depends on:
Reported: 2017-12-13 09:57 PST by Fabrice
Modified: 2018-01-05 06:42 PST (History)
3 users (show)

See Also:

the bug (215.47 KB, image/jpeg)
2017-12-13 09:57 PST, Fabrice
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Fabrice 2017-12-13 09:57:14 PST
Created attachment 329226 [details]
the bug

got a div with html elements and a webgl(threejs) canvas
If div goes full screen, displays ok in chrome and ff. in Safari, only clear color (webgl) is displayed, html elements on top ok.
If entire page brought to fullscreen in Safari works and all renders ok.

no errors, all runs fine in all browsers only fullscreen of a specific div fails in safari
Comment 1 Alexey Proskuryakov 2017-12-15 13:51:21 PST
Could you please provide a test page that reproduces the problem?
Comment 2 Radar WebKit Bug Importer 2017-12-15 13:51:39 PST
Comment 3 Fabrice 2017-12-22 05:14:17 PST
Sorry for late reaction...
I can't provide "the" case to reproduce with its content right now.

But started already by making a quick simple/ugly case to try reproduce.

Here it works the way it should.
So good news is that its not a webgl thingy.

So far I highly suspect its related to the way Safari handles sizes with div css mixed with percentage and px values. Prolly leading to zero (or NaN) when the viewport update occurs internally.

That's speculation for now. I'll try provide a clone of the page (with neutral content) with the problem asap. Should have done that in the first place...
Comment 4 Fabrice 2018-01-05 05:25:03 PST
k,back to work after a quiet week,
already got unhappy clients calls about problems: blank page in Safari.

like here

all fine in all browsers except safari

Back on client work yesterday, I got exact same prob with another project that was ok. now its blank, no errors. Runs fine in FF and chrome.
The interesting thing is that for this project I have a version that is the only div
with no css and all renders fine. Once in page context using the client css, its white.
Just like when I was going full screen in my original post.

I would gladly add more screenshots, but this 1970 html ui is not really clear on how to do so...
Comment 5 Fabrice 2018-01-05 06:42:31 PST
element.style.backgroundColor = 'black';  --> fixes the webgl rendering

other colours act as a color transform, and the rendering fails
by default, it looks like FFFFFF is being used, and in this case, nothing, just white.
So looks like some compositing bug in Safari.

Glad I have a work around for now... lost days on this.
now back to other probs related to this miserable tech known as html...