67203 2011-08-30 09:13:12 -0700 Absolutely positioned div with canvas child does not move with parent div. 2014-10-31 20:35:35 -0700 1 1 1 Unclassified WebKit New Bugs 528+ (Nightly build) Mac (Intel) OS X 10.7 RESOLVED FIXED InRadar P2 Normal --- 1 madsenat simon.fraser aljungberg enne mdelaney7 simon.fraser vangelis webkit-bug-importer oldest_to_newest 458942 0 madsenat 2011-08-30 09:13:12 -0700 The above URL shows a simple process block we use in our online diagramming application. After a few seconds I highlight the divs, remove some extra DOM elements that are not needed for the demo, and add the event handlers for the demo. The final DOM structure is as follows: <p /> - hidden <p /> <div> <div> <canvas /> (shape canvas) <div> <canvas /> (text canvas) </div> </div> </div> If you drag around the element you will see that the canvas the text is rendered on (in blue) stays in place while the div parent of the canvas (green) stays where it should be. You can press the 'x' key to toggle the visibility of the text canvas (css display set to 'none' and 'block' appropriately) and when you show it again it will be in the right place. Another interesting note is that if you reverse the order of the outer canvas (where the block shape is rendered) and it's sibling div (the parent of the text canvas) then they stay together just fine. You can use the 'y' key to see this in action. We see the same issues on the beta channel of Chrome and it appears to be a GPU acceleration thing as we can locate a GPU acceleration related process and kill it and everything snaps back to the right place. To see this issue in our production environment you can visit lucidchart.com/demo and drag a block from the left hand column onto the page then drag it around. 458944 1 madsenat 2011-08-30 09:15:15 -0700 Just as a note, I have created the same DOM structure as the example and manually drawn some lines and shapes on the different canvases but it would not reproduce the problem. We are only able to get it to happen when the canvases are drawn from our system. 476777 2 109437 bckenny 2011-10-02 22:27:33 -0700 Created attachment 109437 simpler test case Here is a simpler test case with the same DOM structure but without the Lucid Chart js library. The static HTML and CSS are sufficient to set up the buggy render tree, but js is necessary to move the div to see the child canvas not being repainted. The key requirements in this example seem to be to have all the elements positioned, and the top-most div be overflow clipped. When the rectangle's div is moved, layout appears to happen correctly, but the text canvas isn't repainted until a larger repaint is forced (selecting in dev tools, window resizing, etc). As the original testcase demonstrated, adding one of several style properties to the rectangle's div makes it properly repaint the text canvas (opacity and transforms work; overflow:hidden makes both the text canvas and its parent div not repaint). As noted in the matching Chromium bug (http://crbug.com/95275), painting can also be fixed by making the text canvas not positioned (so it's not in its own compositing layer). I'm seeing this bug in Chrome 16 (103657) but not Safari on Windows 7 Safari 5.1 on OS X 10.7.1 (but not on 10.6.8) bisecting Chromium puts the problem within http://build.chromium.org/f/chromium/perf/dashboard/ui/changelog.html?url=/trunk/src&range=86508:86542 but that may be just because accelerated canvas was turned on in 86510 477304 3 vangelis 2011-10-03 15:52:35 -0700 My first hunch was that the behavior was unrelated to canvas but had something to do with composited layers and absolute positioning. Replacing the outer canvas (rect_canvas) by a div with a translateZ(0) webkit transform still reproduces the problem. Further replacing the inner canvas (text_canvas) by a div makes the issue go away even though we still correctly get two composited layers. I'm pretty sure that the recent behavior change is a result of the introduction of the accelerated canvas both Safari in 10.7 and Chrome version 15+. CC-ing a couple more folks familiar with this part of the code. 477674 4 webkit-bug-importer 2011-10-04 10:11:20 -0700 <rdar://problem/10231214> 559239 5 simon.fraser 2012-02-17 09:07:53 -0800 To work around this you can put z-index: 0 on #fullscreen_div. 559250 6 simon.fraser 2012-02-17 09:25:21 -0800 The bug here is that changing the position of #rect_div results in an incremental layout which doesn't encompass the layer for #text_canvas. 559252 7 simon.fraser 2012-02-17 09:26:45 -0800 This is a more subtle version of bug 26430. 1045479 8 simon.fraser 2014-10-31 20:35:35 -0700 No longer reproduces. 109437 2011-10-02 22:27:33 -0700 2011-10-02 22:27:33 -0700 simpler test case compositing_test.html text/html 2814 bckenny 77u/PCFkb2N0eXBlIGh0bWw+DQo8aHRtbD4NCjxoZWFkPg0KICA8bWV0YSBjaGFyc2V0PSJ1dGYt OCI+DQogIDx0aXRsZT5jb21wb3NpdGluZyBsYXllciBidWc8L3RpdGxlPg0KICA8c3R5bGU+DQog ICAgI2Z1bGxzY3JlZW5fZGl2IHsNCiAgICAgIHBvc2l0aW9uOiByZWxhdGl2ZTsNCiAgICAgIG92 ZXJmbG93OiBoaWRkZW47DQogICAgICB3aWR0aDogMTAwMHB4Ow0KICAgICAgaGVpZ2h0OiA4MDBw eDsNCiAgICB9DQogICAgI3JlY3RfZGl2IHsNCiAgICAgIHBvc2l0aW9uOiBhYnNvbHV0ZTsNCiAg ICAgIGxlZnQ6IDM1MXB4Ow0KICAgICAgdG9wOiAyMTlweDsNCiAgICAgIHdpZHRoOiAzNTZweDsN CiAgICAgIGhlaWdodDogMjU2cHg7DQogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDI1NSwg MjU1LCAwLCAwLjI5Njg3NSk7DQogICAgfQ0KICAgICNyZWN0X2NhbnZhcyB7DQogICAgICBsZWZ0 OiAwcHg7DQogICAgICB0b3A6IDBweDsNCiAgICAgIHdpZHRoOiAzNTZweDsNCiAgICAgIGhlaWdo dDogMjU2cHg7DQogICAgfQ0KICAgICN0ZXh0X2RpdiB7DQogICAgICBwb3NpdGlvbjogYWJzb2x1 dGU7DQogICAgICBsZWZ0OiA5M3B4Ow0KICAgICAgdG9wOiA4OHB4Ow0KICAgICAgd2lkdGg6IDcw cHg7DQogICAgICBoZWlnaHQ6IDIzcHg7DQogICAgICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAs IDI1NSwgMCwgMC4yOTY4NzUpOw0KICAgIH0NCiAgICAjdGV4dF9jYW52YXMgew0KICAgICAgcG9z aXRpb246IGFic29sdXRlOw0KICAgICAgbGVmdDogMHB4Ow0KICAgICAgdG9wOiAwcHg7DQogICAg ICBiYWNrZ3JvdW5kLWNvbG9yOiByZ2JhKDAsIDAsIDI1NSwgMC4yOTY4NzUpOw0KICAgIH0NCiAg PC9zdHlsZT4NCjwvaGVhZD4NCjxib2R5Pg0KPGRpdiBpZD0iZnVsbHNjcmVlbl9kaXYiPg0KICA8 YnV0dG9uIGlkPSJtb3ZlX2J1dHRvbiI+TW92ZSBSZWN0PC9idXR0b24+DQogIDxidXR0b24gaWQ9 InRyYW5zZm9ybV9idXR0b24iPkFkZCB0cmFuc2Zvcm08L2J1dHRvbj4NCiAgDQogIDxkaXYgaWQ9 InJlY3RfZGl2Ij4NCiAgICA8Y2FudmFzIGlkPSJyZWN0X2NhbnZhcyIgd2lkdGg9IjM1NiIgaGVp Z2h0PSIyNTYiPjwvY2FudmFzPg0KICAgIA0KICAgIDxkaXYgaWQ9InRleHRfZGl2Ij4NCiAgICAg IDxjYW52YXMgaWQ9InRleHRfY2FudmFzIiB3aWR0aD0iNjciIGhlaWdodD0iMjAiPjwvY2FudmFz Pg0KICAgIDwvZGl2Pg0KICA8L2Rpdj4NCjwvZGl2Pg0KDQo8c2NyaXB0Pg0KICAvLyBzaW1wbGUg c3R5bGluZyB0byByb3VnaGx5IG1hdGNoIG9yaWdpbmFsIHRlc3QgY2FzZQ0KICB2YXIgY3R4MSA9 IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdyZWN0X2NhbnZhcycpLmdldENvbnRleHQoJzJkJyk7 DQogIGN0eDEuZmlsbFN0eWxlID0gIndoaXRlIjsNCiAgY3R4MS5maWxsUmVjdCgyMCwgMjAsIDMx NiwgMjE2KTsNCiAgY3R4MS5zdHJva2VSZWN0KDIwLCAyMCwgMzE2LCAyMTYpOw0KICB2YXIgY3R4 MiA9IGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCd0ZXh0X2NhbnZhcycpLmdldENvbnRleHQoJzJk Jyk7DQogIGN0eDIuZm9udD0nMThweCBzYW5zLXNlcmlmJzsNCiAgY3R4Mi5maWxsVGV4dCgnUHJv Y2VzcycsIDEsIDE3KTsNCg0KICAvLyByYW5kb21seSBtb3ZlIHJlY3RfZGl2LCBsZWF2aW5nIG5v dC1yZXBhaW50ZWQgdGV4dF9jYW52YXMgYmVoaW5kDQogIHZhciByZWN0RGl2ID0gZG9jdW1lbnQu Z2V0RWxlbWVudEJ5SWQoJ3JlY3RfZGl2Jyk7DQogIGRvY3VtZW50LmdldEVsZW1lbnRCeUlkKCdt b3ZlX2J1dHRvbicpLmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywNCiAgICAgIGZ1bmN0aW9uKGUp IHsNCiAgICAgICAgcmVjdERpdi5zdHlsZS5sZWZ0ID0gMjAgKyBNYXRoLmZsb29yKDYwMCAqIE1h dGgucmFuZG9tKCkpICsgJ3B4JzsNCiAgICAgICAgcmVjdERpdi5zdHlsZS50b3AgPSAyMCArIE1h dGguZmxvb3IoNTAwICogTWF0aC5yYW5kb20oKSkgKyAncHgnOw0KICAgICAgfSwgZmFsc2UpOw0K ICANCiAgLy8gc2V0IGEgdHJhbnNmb3JtIG9uIHJlY3RfZGl2IHRvIGhhdmUgaXRzIHBvc2l0aW9u IGNoYW5nZXMgdHJpZ2dlciByZXBhaW50DQogIC8vIG9mIHRleHRfY2FudmFzLiBTZXZlcmFsIG90 aGVyIHN0eWxlIHByb3BlcnRpZXMgd29yayBoZXJlLCBlLmcuIG9wYWNpdHkuDQogIC8vIG92ZXJm bG93OmhpZGRlbiBoYXMgaXRzIG93biBvZGQgYmVoYXZpb3IgKHRleHRfZGl2IGpvaW5zIHRleHRf Y2FudmFzDQogIC8vIGluIG5vdCBiZWluZyByZXBhaW50ZWQpDQogIHZhciB0cmFuc2Zvcm1TdGF0 ZSA9IGZhbHNlOw0KICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndHJhbnNmb3JtX2J1dHRvbicp LmFkZEV2ZW50TGlzdGVuZXIoJ2NsaWNrJywNCiAgICAgIGZ1bmN0aW9uKGUpIHsNCiAgICAgICAg aWYgKHRyYW5zZm9ybVN0YXRlKSB7DQogICAgICAgICAgcmVjdERpdi5zdHlsZS53ZWJraXRUcmFu c2Zvcm0gPSAnJzsNCiAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndHJhbnNmb3Jt X2J1dHRvbicpLmlubmVyVGV4dCA9ICdBZGQgdHJhbnNmb3JtJzsNCiAgICAgICAgfSBlbHNlIHsN CiAgICAgICAgICByZWN0RGl2LnN0eWxlLndlYmtpdFRyYW5zZm9ybSA9ICd0cmFuc2xhdGVYKDAp JzsNCiAgICAgICAgICBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgndHJhbnNmb3JtX2J1dHRvbicp LmlubmVyVGV4dCA9ICdSZW1vdmUgdHJhbnNmb3JtJzsNCiAgICAgICAgfQ0KDQogICAgICAgIHRy YW5zZm9ybVN0YXRlID0gIXRyYW5zZm9ybVN0YXRlOw0KICAgICAgfSwgZmFsc2UpOw0KPC9zY3Jp cHQ+DQo8L2JvZHk+DQo8L2h0bWw+