Bug 31852 - -webkit-transform:translate3d causes corruption of text in inputs
Summary: -webkit-transform:translate3d causes corruption of text in inputs
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://themaingate.net/work/translate...
Keywords:
Depends on:
Blocks:
 
Reported: 2009-11-24 15:08 PST by David Calhoun
Modified: 2022-07-11 16:56 PDT (History)
5 users (show)

See Also:


Attachments
reduced test case (277 bytes, text/html)
2009-11-24 15:08 PST, David Calhoun
no flags Details
text input corruption in a password field (left) (5.21 KB, image/png)
2009-11-24 15:10 PST, David Calhoun
no flags Details
text input corruption (right) (6.20 KB, image/png)
2009-11-24 15:11 PST, David Calhoun
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description David Calhoun 2009-11-24 15:08:45 PST
Created attachment 43812 [details]
reduced test case

With translate3d added to an element, text corruption occurs with a specific arrangement of the HTML elements that follow.  It seems to only affect text text inputs with display:table-row on their parent container.  See the screenshots and the attached test case for more details.

This occurs with the latest nightly (WebKit r51303).  It also occurs on my iPhone, which has this user agent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; en-us) AppleWebKit/528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16
Comment 1 David Calhoun 2009-11-24 15:10:21 PST
Created attachment 43813 [details]
text input corruption in a password field (left)
Comment 2 David Calhoun 2009-11-24 15:11:50 PST
Created attachment 43814 [details]
text input corruption (right)

Note that when leaving the left password field (blur event), the text becomes "ungarbled".  However the same problem plagues the non-password input field while typing (on the right).
Comment 3 David Calhoun 2009-12-03 11:44:03 PST
The fix is to add this rule to the stylesheet (thanks to my coworker):

input[type=password], input:focus, textarea {
    -webkit-transform: scale(1,1);
}
Comment 4 Simon Fraser (smfr) 2010-12-21 12:05:55 PST
Does this still reproduce? Seems OK in Safari 5.0.3 to me.
Comment 5 Devin Rhode 2012-01-17 08:48:43 PST
When you open a page in an iframe and it uses translate3d, it also seems to corrupt text that is z-index'd above it, OUTSIDE the iframe.

<span>Normal text</span>
<iframe> ...some element has "transform:translate3d(Npx, Mpx, Opx);":</iframe>

The normal text then get's visually altered. The same visual bug occurs when you add the translate3d property right to the text element itself.
Comment 6 Devin Rhode 2012-01-17 08:52:11 PST
Further, David Calhoun's hack of using -webkit-transform: scale(1,1); on an element doesn't work for regular text nodes. A <span> tag in my case, obviously it would be for all text elements. This is all whti Chrome 17/beta
Comment 7 Simon Fraser (smfr) 2012-01-17 09:11:45 PST
Devin, I still can't reproduce, even in a recent WebKit nightly build on Mac.
Comment 8 Yehonatan Daniv 2012-03-07 03:02:40 PST
Working on 17.0.963.65 (Developer Build 124586 Linux) Ubuntu 11.10

I see corruption of caret positioning in a text input:

http://jsfiddle.net/errFm/1/
Comment 9 Yehonatan Daniv 2012-03-07 03:04:09 PST
(In reply to comment #8)
> Working on 17.0.963.65 (Developer Build 124586 Linux) Ubuntu 11.10
> 
> I see corruption of caret positioning in a text input:
> 
> http://jsfiddle.net/errFm/1/

Also note that the scale(1,1) doesn't fix that
Comment 10 Brent Fulgham 2022-07-11 16:56:45 PDT
Safari, Chrome, and Firefox show the same rendering behavior for this test case. I do not believe any further compatibility issue remains.