23888 2009-02-10 20:54:25 -0800 CSS -webkit-transform scale(-1, 0) on button input draws incorrectly 2022-07-22 21:59:07 -0700 1 1 1 Unclassified WebKit CSS 528+ (Nightly build) Mac OS X 10.5 RESOLVED CONFIGURATION CHANGED http://www.zachstronaut.com/lab/webkit-scale-bug.html HasReduction, InRadar P2 Normal --- 1 zachary.johnson webkit-unassigned ahmad.saleem792 ap bfulgham hyatt mrowe rniwa simon.fraser zachary.johnson oldest_to_newest 109240 0 zachary.johnson 2009-02-10 20:54:25 -0800 If you apply the CSS -webkit-transform: scale(-1,1) to an HTML <input type="button" /> it causes the button to draw correctly in the sense that it is a mirror image but incorrectly in the sense that the two ends of the button are missing. The Firefox 3.1 beta for OS X draws a backwards/reversed button without this visual error. Incidentally, I kind of think this bug didn't exist when CSS transforms were first introduced. I also included animation of the CSS scale() property in the example . If you look very closely you can see that when at a negative scale, the button leaves little bits of itself behind as it is animated. It does not paint correctly. I am @zacharyjohnson on Twitter. 109242 1 mrowe 2009-02-10 21:21:50 -0800 <rdar://problem/6575625> 109616 2 27639 simon.fraser 2009-02-12 21:40:29 -0800 Created attachment 27639 Testcase 1886005 3 ahmad.saleem792 2022-07-22 10:18:27 -0700 I updated the test case slightly - https://jsfiddle.net/vcmdys30/show By removing -webkit- prefix in test case and also adding JS line: bar.style['transform'] = 'scale(' + s + ', 1)'; I didn't see any glitch or visual error where the button ends are missing in Safari 15.6 on macOS 12.5 (it was matching other browsers - Chrome Canary 105 and Firefox Nightly 104) similarly as for the paint, I am not able to understand the part, I think someone else can look into it. Thanks! 1886177 4 rniwa 2022-07-22 21:59:07 -0700 This appears to be working now. 27639 2009-02-12 21:40:29 -0800 2009-02-12 21:40:29 -0800 Testcase 23888_testcase.html text/html 1171 simon.fraser PCFET0NUWVBFIGh0bWwgUFVCTElDICItLy9XM0MvL0RURCBYSFRNTCAxLjAgU3RyaWN0Ly9FTiIK CSJodHRwOi8vd3d3LnczLm9yZy9UUi94aHRtbDEvRFREL3hodG1sMS1zdHJpY3QuZHRkIj4KCjxo dG1sIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hodG1sIiB4bWw6bGFuZz0iZW4iIGxh bmc9ImVuIj4KPGhlYWQ+Cgk8bWV0YSBodHRwLWVxdWl2PSJDb250ZW50LVR5cGUiIGNvbnRlbnQ9 InRleHQvaHRtbDsgY2hhcnNldD11dGYtOCIvPgoKCTx0aXRsZT51bnRpdGxlZDwvdGl0bGU+CgkK CTxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyIgbWVkaWE9ImFsbCI+Cglib2R5IHsKCSAgICAvKiBpbmNv bnNlcXVlbnRpYWwgdG8gdGVzdCBjYXNlICovCgkgICAgbWFyZ2luOiA1MHB4OwoJfQoJCiAgICAj Zm9vIHsKICAgICAgICAtd2Via2l0LXRyYW5zZm9ybTogc2NhbGUoLTEsMSk7CiAgICB9CiAgICAK ICAgIGRpdiB7CiAgICAgICAgLyogaW5jb25zZXF1ZW50aWFsIHRvIHRlc3QgY2FzZSAqLwogICAg ICAgIGhlaWdodDogNTBweDsKICAgIH0KCTwvc3R5bGU+CgkKCTxzY3JpcHQgdHlwZT0idGV4dC9q YXZhc2NyaXB0IiBsYW5ndWFnZT0iamF2YXNjcmlwdCIgY2hhcnNldD0idXRmLTgiPgogICAgd2lu ZG93Lm9ubG9hZCA9IGZ1bmN0aW9uICgpIHsKICAgICAgICBzZXRJbnRlcnZhbChmLCAxMDApOwog ICAgfQogICAgCiAgICB2YXIgaSA9IDA7CiAgICBmdW5jdGlvbiBmKCkgewogICAgICAgIHZhciBi YXIgPSBkb2N1bWVudC5nZXRFbGVtZW50QnlJZCgnYmFyJyk7CiAgICAgICAgCiAgICAgICAgaSsr OwogICAgICAgIAogICAgICAgIHZhciBzID0gLTEgKyAoKGkgJSA1MCkgLyAyNSkKICAgICAgICAK ICAgICAgICBiYXIuc3R5bGVbJy13ZWJraXQtdHJhbnNmb3JtJ10gPSAnc2NhbGUoJyArIHMgKyAn LCAxKSc7CiAgICAgICAgYmFyLnN0eWxlWydNb3pUcmFuc2Zvcm0nXSA9ICdzY2FsZSgnICsgcyAr ICcsIDEpJzsKICAgIH0KCTwvc2NyaXB0PgoJCjwvaGVhZD4KPGJvZHk+Cgo8aW5wdXQgdHlwZT0i YnV0dG9uIiBuYW1lPSJmb28iIGlkPSJmb28iIHZhbHVlPSJIVE1MIEJVVFRPTiIgLz4KCjxkaXY+ PC9kaXY+Cgo8aW5wdXQgdHlwZT0iYnV0dG9uIiBuYW1lPSJiYXIiIGlkPSJiYXIiIHZhbHVlPSJI VE1MIEJVVFRPTiIgLz4KCjwvYm9keT4KPC9odG1sPg==