Text cursor stops working when translate3d is applied

• Component: CSS
• Status: RESOLVED CONFIGURATION CHANGED

[Christophe Tauziet]

Hi all,

I'm facing an issue with WebKit that is quite annoying. The following issue occurs in Safari and Chrome for Mac (haven't tested it anywhere else). 

If you have an <input> text field inside an element that has a translate3D transformation, using the left/right arrow keys of your keyboard won't move the cursor while editing the content of the text field.

There's a thread on Stack Overflow where other people are facing the same issue, and try to find a workaround using JS. 
http://stackoverflow.com/questions/7347241/caret-text-cursor-stops-when-translate3d-is-applied

Please let me know whenever this issue gets fixed.

Christophe Tauziet
[e-mail]

[Simon Fraser (smfr)]

Does this reproduce with recent WebKit nightly builds? Similar to bug 15671, possibly fixed via bug 103955.

Created attachment 188808 [details]
Example of the bug

Hi all,

I can confirm that this bug and it can be observed in the attached example (sorry for the odd styles, it's pulled from a build). 

Try typing in the example, using your direction keys and hovering the mouse over the field.

Kind regards,

Alan

[Simon Fraser (smfr)]

Please attach the test content you used to make your screenshot.

Hi Simon,

Sorry but I'm not sure what you mean? The attachment is a HTML file that includes all the content within it to replicate the bug.

Am I missing something?

Thanks,

Alan

[Simon Fraser (smfr)]

Sorry, I assumed it was a screenshot!

[Simon Fraser (smfr)]

The caret blinks just fine for me in a recent WebKit build on Mac.

Odd, I'm using the latest stable Chrome build and am experiencing the issue when using the webkit translate3D property. 

I'll attach a quick screencast so you can see what I mean. Throughout the cast I'm pressing the direction buttons (left and right) to no effect.

This occurs for me for Chrome on OSx (as per screencast) and on my Ubuntu box.

Any thoughts?

Created attachment 188925 [details]
Screencast of the bug in chrome on OSx

[Radu Brehar]

I can confirm the bug manifests in mobile webkits as well.
The problem is that you cannot put an <input> inside a container with translate3d.

Please see details at
http://stackoverflow.com/questions/17337584/strange-behavior-with-input-when-inside-translated-div-on-mobile-webkit
where you can also find an example with the bug.

Regards,
Radu.

[Simon Fraser (smfr)]

Please report "mobile webkits" bugs to the appropriate vendor.

[Radu Brehar]

Unfortunately the bug is reproducible in all "mobile webkits" so I thought this is the best place for it.
Anyway, if it doesn't concern anyone from webkit, just ignore it. Besides, I haven't found any public bug tracker from Apple to report it. I have reported it in the Android tracker, so let's hope we'll get a better response there.

Thanks,
Radu.

[Brent Fulgham]

This does not appear to be an issue in Safari 15.