Bug 23888

Summary: CSS -webkit-transform scale(-1, 0) on button input draws incorrectly
Product: WebKit Reporter: Zachary Johnson <zachary.johnson>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: ahmad.saleem792, ap, bfulgham, hyatt, mrowe, rniwa, simon.fraser, zachary.johnson
Priority: P2 Keywords: HasReduction, InRadar
Version: 528+ (Nightly build)   
Hardware: Mac   
OS: OS X 10.5   
URL: http://www.zachstronaut.com/lab/webkit-scale-bug.html
Attachments:
Description Flags
Testcase none

Description Zachary Johnson 2009-02-10 20:54:25 PST
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.
Comment 1 Mark Rowe (bdash) 2009-02-10 21:21:50 PST
<rdar://problem/6575625>
Comment 2 Simon Fraser (smfr) 2009-02-12 21:40:29 PST
Created attachment 27639 [details]
Testcase
Comment 3 Ahmad Saleem 2022-07-22 10:18:27 PDT
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!
Comment 4 Ryosuke Niwa 2022-07-22 21:59:07 PDT
This appears to be working now.