Bug 23888 – CSS -webkit-transform scale(-1, 0) on button input draws incorrectly

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Zachary Johnson]

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.

[Mark Rowe (bdash)]

<rdar://problem/6575625>

[Simon Fraser (smfr)]

Created attachment 27639 [details]
Testcase

[Ahmad Saleem]

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!

[Ryosuke Niwa]

This appears to be working now.