Bug 152556 – WebGL based canvases composite incorrectly after changing size

• Status: RESOLVED
• Resolution: FIXED
• Component: WebGL

[Gregg Tavares]

Created attachment 267913 [details]
show issue with webgl in ios

Set a canvas's CSS width and height to 100% inside some fixed size container.
From JavaScript change the canvas's width and height (its drawingbuffer size). 
The canvas should still be displayed stretched to its container's width and height. It's not

This works with 2d canvas. It only fails on webgl canvas.

Also it's iOS only. Works find on desktop safari

Run the attached sample, ios-webgl-issue.html: You should see a red square filled with green, then 2 seconds later filled with orange. On iOS the orange isn't being stretched.

The ios-canvas-issue shows 2d canvas works correctly.

Other things to note: The inspector claims the the canvas is the correct size (stretched to fit). Also JavaScript claims the canvas is the correct size (stretched to fit). canvas.clientWidth returns 400 and canvas.getBoundingClientRect returns a stretched size

[Gregg Tavares]

Created attachment 267914 [details]
show canvas 2d works as expected

[Gregg Tavares]

Also note, setting the containers CSS dimensions fixes the issue although it appears compositing has to happen at least once. In other words

    container.style.width = "401px"; container.style.width = "400px";

doesn't work but
 
    container.style.width = "401px";  // change container size temporarily
    setTimeout(function() {
      container.style.width = "400px":  // change it back
    }, 200);

Sounds like some internal flag just needs to be set to fix this

[Radar WebKit Bug Importer]

<rdar://problem/24012678>

I have also been having this problem and its really serious for us as the webgl renderer in retina mode draws outside of the canvas element!  At least one other person has also had this difficulty

http://stackoverflow.com/questions/35745878/resize-webgl-context-in-ios

[Simon Fraser (smfr)]

Do you have a simple testcase?

[Simon Fraser (smfr)]

Never mind, I found http://adam1234.s3-website-us-east-1.amazonaws.com/bug.html

[Simon Fraser (smfr)]

Only happens on iOS, and when the canvas backing store has a different size to the canvas.

[Simon Fraser (smfr)]

GraphicsContext3D::setRenderbufferStorageFromDrawable() is setting the WebGL height/width to the backing store size, but nothing causes that WebGL layer to respect the contentsRect of its GraphicsLayer.

[Antoine Quint]

Created attachment 276378 [details]
Patch

[Dean Jackson]

Comment on attachment 276378 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=276378&action=review

> Source/WebCore/platform/graphics/mac/GraphicsContext3DMac.mm:346
> +    // do not want to clobber the bounds set during layout, so we remember the current value,

I think the comments after "layout," aren't needed.

> Source/WebCore/platform/graphics/mac/GraphicsContext3DMac.mm:348
> +    CGRect previousBounds = m_webGLLayer.get().bounds;

I think we tend to write these as [a.get() b] 
If we didn't have the refptr in the way it would be fine as a.b

> LayoutTests/webgl/webgl-backing-store-size-update-expected.html:6
> +<div style="width: 50px; height: 50px; background-color: black;"></div>

You only need this line.

> LayoutTests/webgl/webgl-backing-store-size-update.html:6
> +<canvas style="width:100px; height:100px;">

You don't need anything before this line.

> LayoutTests/webgl/webgl-backing-store-size-update.html:16
> +        var devicePixelRatio = 2;

Technically i think we just want to make sure that the width and height don't match the layout size. It isn't really DPR.

> LayoutTests/webgl/webgl-backing-store-size-update.html:22
> +        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

You only need to clear the COLOR part in this example.

[Antoine Quint]

Created attachment 276385 [details]
Patch for landing

[WebKit Commit Bot]

Comment on attachment 276385 [details]
Patch for landing

Clearing flags on attachment: 276385

Committed r199536: <http://trac.webkit.org/changeset/199536>

[WebKit Commit Bot]

All reviewed patches have been landed.  Closing bug.