24956 2009-03-30 19:14:01 -0700 CSS Transition perf bad in combination with CSS gradients on MacBook Air / lower end graphics chips 2009-04-23 23:03:08 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Mac OS X 10.5 RESOLVED DUPLICATE 24130 http://farukat.es/bugs/webkit-css-grad-trans-perf.html P2 Normal --- 1 farukates webkit-unassigned dino simon.fraser oldest_to_newest 115964 0 farukates 2009-03-30 19:14:01 -0700 CSS Gradients can cause a significant slowdown in rendering performance when using CSS Transitions, but this is predominantly noticeable on the MacBook Air and other computers with integrated graphics. Moving an element around that sits on top of a gradient causes serious frame rate drops (as measured with Quartz Debug). On a solid background it transitions smoothly. 115974 1 29108 farukates 2009-03-30 19:47:26 -0700 Created attachment 29108 Reduced test case 115977 2 29109 farukates 2009-03-30 20:02:36 -0700 Created attachment 29109 Test case showing that giving the HTML element a background color fixes the issue Added a second test case that sets a solid color on the html element, which makes performance snappy again. Using a gradient (third test case, soon to be attached) as opposed to a solid color, makes it go slow again. 115978 3 29110 farukates 2009-03-30 20:03:02 -0700 Created attachment 29110 Third test case, using a gradient on the HTML element 118616 4 simon.fraser 2009-04-23 23:03:08 -0700 Same cause as bug 24130. *** This bug has been marked as a duplicate of 24130 *** 29108 2009-03-30 19:47:26 -0700 2009-03-30 19:47:26 -0700 Reduced test case webkit-css-grad-trans-perf.html text/html 1099 farukates PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIiBkaXI9Imx0ciI+CjxoZWFkIHByb2ZpbGU9 Imh0dHA6Ly9nbXBnLm9yZy94Zm4vMTEiPgoJPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBl IiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9dXRmLTgiIC8+CgoJPHRpdGxlPkNTUyBHcmFk aWVudHMgYW5kIFRyYW5zaXRpb25zIGNvbXBvc2l0aW5nIHBlcmYgaXNzdWU8L3RpdGxlPgoJPHN0 eWxlIHR5cGU9InRleHQvY3NzIiBtZWRpYT0ic2NyZWVuIj4KCQlib2R5IHsKCQkJYmFja2dyb3Vu ZDogLXdlYmtpdC1ncmFkaWVudChsaW5lYXIsIGxlZnQgdG9wLCByaWdodCBib3R0b20sIGZyb20o IzlmOSksIHRvKHdoaXRlKSk7CgkJCWhlaWdodDogMTAwJTsKCQl9CgkJZGl2IHsKCQkJd2lkdGg6 IDIwMHB4OwoJCQloZWlnaHQ6IDIwMHB4OwoJCQltYXJnaW4tbGVmdDogMDsKCQkJYmFja2dyb3Vu ZDogI2NjYzsKCQkJLXdlYmtpdC10cmFuc2l0aW9uOiBhbGwgLjVzIGVhc2U7CgkJfQoJCWRpdiNn cmFkaWVudCB7CgkJCWJhY2tncm91bmQ6IC13ZWJraXQtZ3JhZGllbnQobGluZWFyLCByaWdodCBi b3R0b20sIGxlZnQgdG9wLCBmcm9tKCMzMzMpLCB0bygjY2NjKSk7CgkJfQoJCWJvZHkuY2xpY2tl ZCBkaXYgewoJCQltYXJnaW4tbGVmdDogNDAwcHg7CgkJfQoJPC9zdHlsZT4KCTxzY3JpcHQgdHlw ZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+CgkJdmFyIG1vdmVkID0gZmFsc2U7 CgkJd2luZG93Lm9ubG9hZCA9IGZ1bmN0aW9uKCkgewoJCQlkb2N1bWVudC5nZXRFbGVtZW50c0J5 VGFnTmFtZSgnYm9keScpWzBdLm9uY2xpY2sgPSBmdW5jdGlvbigpIHsKCQkJCXRoaXMuY2xhc3NO YW1lID0gd2luZG93Lm1vdmVkID8gIiIgOiAiY2xpY2tlZCI7CgkJCQl3aW5kb3cubW92ZWQgPSB3 aW5kb3cubW92ZWQgPyBmYWxzZSA6IHRydWU7CgkJCX07CgkJfTsKCTwvc2NyaXB0Pgo8L2hlYWQ+ Cjxib2R5Pgo8ZGl2IGlkPSJzb2xpZCI+CglDbGljayB0aGUgYm9keSB0byBtb3ZlIHVzIQo8L2Rp dj4KPGRpdiBpZD0iZ3JhZGllbnQiPgoJQ2xpY2sgdGhlIGJvZHkgdG8gbW92ZSB1cyEKPC9kaXY+ CjwvYm9keT4KPC9odG1sPg== 29109 2009-03-30 20:02:36 -0700 2009-03-30 20:02:36 -0700 Test case showing that giving the HTML element a background color fixes the issue webkit-css-grad-trans-perf-2.html text/html 1165 farukates PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIiBkaXI9Imx0ciI+CjxoZWFkIHByb2ZpbGU9 Imh0dHA6Ly9nbXBnLm9yZy94Zm4vMTEiPgoJPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBl IiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9dXRmLTgiIC8+CgoJPHRpdGxlPkNTUyBHcmFk aWVudHMgYW5kIFRyYW5zaXRpb25zIGNvbXBvc2l0aW5nIHBlcmYgaXNzdWU8L3RpdGxlPgoJPHN0 eWxlIHR5cGU9InRleHQvY3NzIiBtZWRpYT0ic2NyZWVuIj4KCQlodG1sIHsKCQkJYmFja2dyb3Vu ZDogcmVkOwoJCX0KCQlib2R5IHsKCQkJYmFja2dyb3VuZDogLXdlYmtpdC1ncmFkaWVudChsaW5l YXIsIGxlZnQgdG9wLCByaWdodCBib3R0b20sIGZyb20oIzlmOSksIHRvKHdoaXRlKSk7CgkJCS8q aGVpZ2h0OiAxMDAlOyovCgkJCW1hcmdpbjogMDsKCQkJcGFkZGluZzogMDsKCQl9CgkJZGl2IHsK CQkJd2lkdGg6IDIwMHB4OwoJCQloZWlnaHQ6IDIwMHB4OwoJCQltYXJnaW4tbGVmdDogMDsKCQkJ YmFja2dyb3VuZDogI2NjYzsKCQkJLXdlYmtpdC10cmFuc2l0aW9uOiBhbGwgLjVzIGVhc2U7CgkJ fQoJCWRpdiNncmFkaWVudCB7CgkJCWJhY2tncm91bmQ6IC13ZWJraXQtZ3JhZGllbnQobGluZWFy LCByaWdodCBib3R0b20sIGxlZnQgdG9wLCBmcm9tKCMzMzMpLCB0bygjY2NjKSk7CgkJfQoJCWJv ZHkuY2xpY2tlZCBkaXYgewoJCQltYXJnaW4tbGVmdDogNDAwcHg7CgkJfQoJPC9zdHlsZT4KCTxz Y3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+CgkJdmFyIG1vdmVk ID0gZmFsc2U7CgkJd2luZG93Lm9ubG9hZCA9IGZ1bmN0aW9uKCkgewoJCQlkb2N1bWVudC5nZXRF bGVtZW50c0J5VGFnTmFtZSgnYm9keScpWzBdLm9uY2xpY2sgPSBmdW5jdGlvbigpIHsKCQkJCXRo aXMuY2xhc3NOYW1lID0gd2luZG93Lm1vdmVkID8gIiIgOiAiY2xpY2tlZCI7CgkJCQl3aW5kb3cu bW92ZWQgPSB3aW5kb3cubW92ZWQgPyBmYWxzZSA6IHRydWU7CgkJCX07CgkJfTsKCTwvc2NyaXB0 Pgo8L2hlYWQ+Cjxib2R5Pgo8ZGl2IGlkPSJzb2xpZCI+CglDbGljayB0aGUgYm9keSB0byBtb3Zl IHVzIQo8L2Rpdj4KPGRpdiBpZD0iZ3JhZGllbnQiPgoJQ2xpY2sgdGhlIGJvZHkgdG8gbW92ZSB1 cyEKPC9kaXY+CjwvYm9keT4KPC9odG1sPg== 29110 2009-03-30 20:03:02 -0700 2009-03-30 20:03:02 -0700 Third test case, using a gradient on the HTML element webkit-css-grad-trans-perf-3.html text/html 1231 farukates PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIiBkaXI9Imx0ciI+CjxoZWFkIHByb2ZpbGU9 Imh0dHA6Ly9nbXBnLm9yZy94Zm4vMTEiPgoJPG1ldGEgaHR0cC1lcXVpdj0iQ29udGVudC1UeXBl IiBjb250ZW50PSJ0ZXh0L2h0bWw7IGNoYXJzZXQ9dXRmLTgiIC8+CgoJPHRpdGxlPkNTUyBHcmFk aWVudHMgYW5kIFRyYW5zaXRpb25zIGNvbXBvc2l0aW5nIHBlcmYgaXNzdWU8L3RpdGxlPgoJPHN0 eWxlIHR5cGU9InRleHQvY3NzIiBtZWRpYT0ic2NyZWVuIj4KCQlodG1sIHsKCQkJYmFja2dyb3Vu ZDogLXdlYmtpdC1ncmFkaWVudChsaW5lYXIsIGxlZnQgdG9wLCByaWdodCBib3R0b20sIGZyb20o cmVkKSwgdG8oYmx1ZSkpOwoJCX0KCQlib2R5IHsKCQkJYmFja2dyb3VuZDogLXdlYmtpdC1ncmFk aWVudChsaW5lYXIsIGxlZnQgdG9wLCByaWdodCBib3R0b20sIGZyb20oIzlmOSksIHRvKHdoaXRl KSk7CgkJCS8qaGVpZ2h0OiAxMDAlOyovCgkJCW1hcmdpbjogMDsKCQkJcGFkZGluZzogMDsKCQl9 CgkJZGl2IHsKCQkJd2lkdGg6IDIwMHB4OwoJCQloZWlnaHQ6IDIwMHB4OwoJCQltYXJnaW4tbGVm dDogMDsKCQkJYmFja2dyb3VuZDogI2NjYzsKCQkJLXdlYmtpdC10cmFuc2l0aW9uOiBhbGwgLjVz IGVhc2U7CgkJfQoJCWRpdiNncmFkaWVudCB7CgkJCWJhY2tncm91bmQ6IC13ZWJraXQtZ3JhZGll bnQobGluZWFyLCByaWdodCBib3R0b20sIGxlZnQgdG9wLCBmcm9tKCMzMzMpLCB0bygjY2NjKSk7 CgkJfQoJCWJvZHkuY2xpY2tlZCBkaXYgewoJCQltYXJnaW4tbGVmdDogNDAwcHg7CgkJfQoJPC9z dHlsZT4KCTxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0IiBjaGFyc2V0PSJ1dGYtOCI+CgkJ dmFyIG1vdmVkID0gZmFsc2U7CgkJd2luZG93Lm9ubG9hZCA9IGZ1bmN0aW9uKCkgewoJCQlkb2N1 bWVudC5nZXRFbGVtZW50c0J5VGFnTmFtZSgnYm9keScpWzBdLm9uY2xpY2sgPSBmdW5jdGlvbigp IHsKCQkJCXRoaXMuY2xhc3NOYW1lID0gd2luZG93Lm1vdmVkID8gIiIgOiAiY2xpY2tlZCI7CgkJ CQl3aW5kb3cubW92ZWQgPSB3aW5kb3cubW92ZWQgPyBmYWxzZSA6IHRydWU7CgkJCX07CgkJfTsK CTwvc2NyaXB0Pgo8L2hlYWQ+Cjxib2R5Pgo8ZGl2IGlkPSJzb2xpZCI+CglDbGljayB0aGUgYm9k eSB0byBtb3ZlIHVzIQo8L2Rpdj4KPGRpdiBpZD0iZ3JhZGllbnQiPgoJQ2xpY2sgdGhlIGJvZHkg dG8gbW92ZSB1cyEKPC9kaXY+CjwvYm9keT4KPC9odG1sPg==