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.
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.
Created attachment 267914 [details]
show canvas 2d works as expected
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
container.style.width = "400px": // change it back
Sounds like some internal flag just needs to be set to fix this
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
Do you have a simple testcase?
Never mind, I found http://adam1234.s3-website-us-east-1.amazonaws.com/bug.html
Only happens on iOS, and when the canvas backing store has a different size to the canvas.
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.
Created attachment 276378 [details]
Comment on attachment 276378 [details]
View in context: https://bugs.webkit.org/attachment.cgi?id=276378&action=review
> + // 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.
> + 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
> +<div style="width: 50px; height: 50px; background-color: black;"></div>
You only need this line.
> +<canvas style="width:100px; height:100px;">
You don't need anything before this line.
> + 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.
> + gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
You only need to clear the COLOR part in this example.
Created attachment 276385 [details]
Patch for landing
Comment on attachment 276385 [details]
Patch for landing
Clearing flags on attachment: 276385
Committed r199536: <http://trac.webkit.org/changeset/199536>
All reviewed patches have been landed. Closing bug.