Bug 23888 - CSS -webkit-transform scale(-1, 0) on button input draws incorrectly
Summary: CSS -webkit-transform scale(-1, 0) on button input draws incorrectly
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: Mac OS X 10.5
: P2 Normal
Assignee: Nobody
URL: http://www.zachstronaut.com/lab/webki...
Keywords: HasReduction, InRadar
Depends on:
Blocks:
 
Reported: 2009-02-10 20:54 PST by Zachary Johnson
Modified: 2022-07-22 21:59 PDT (History)
8 users (show)

See Also:


Attachments
Testcase (1.14 KB, text/html)
2009-02-12 21:40 PST, Simon Fraser (smfr)
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
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.