Bug 128181

Summary:

Incorrect caret position inside iframe with -webkit-transform

Product:

WebKit

Reporter:

Andreas Hartmann <andreas.hartmann>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Normal

CC:

andreas.hartmann, dbates, simon.fraser, webkit-bug-importer

Priority:

Keywords:

InRadar

Version:

528+ (Nightly build)

Hardware:

iPhone / iPad

OS:

iOS 7.0

Attachments:

Description	Flags
Screenshot of iOS simulator	none
Screenshot showing caret drawn as bounding box instead of line	none

Andreas Hartmann

Reported 2014-02-04 07:02:47 PST

Created attachment 223108 [details] Screenshot of iOS simulator To reproduce: * Create a document with an iframe * Apply a CSS transformation to the iframe using -webkit-transform * Place an editable element (input/textarea/contenteditable) inside the iframe It looks like the transformation is not applied to the caret (or at least not correctly), see screenshot. HTML to reproduce: <html> <body> <iframe id="iframe" style="-webkit-transform: translate(100px, 0) rotate(20deg)"></iframe> <script> var content = '<html><body><textarea style="height: 300px; width: 600px;"></textarea></body></html>'; document.getElementById('iframe').src = "data:text/html;charset=utf-8," + escape(content); </script> </body> </html>

Attachments
Screenshot of iOS simulator (237.56 KB, image/png) 2014-02-04 07:02 PST, Andreas Hartmann	no flags	Details
Screenshot showing caret drawn as bounding box instead of line (226.61 KB, image/png) 2014-02-04 07:08 PST, Andreas Hartmann	no flags	Details
View All Add attachment proposed patch, testcase, etc.

Andreas Hartmann

Comment 1 2014-02-04 07:07:31 PST

If the transformation is applied to the textarea inside the iframe, the caret is positioned correctly, but drawn as a horizontal rectangle (it looks like the browser draws the bounding box of the caret instead of a line from the top to the bottom endpoint), see screenshot. HTML to reproduce: <html> <body> <iframe id="iframe"></iframe> <script> var content = '<html><body><textarea style="height: 300px; width: 600px; -webkit-transform: translate(100px, 100px) rotate(20deg)"></textarea></body></html>'; document.getElementById('iframe').src = "data:text/html;charset=utf-8," + escape(content); </script> </body> </html>

Andreas Hartmann

Comment 2 2014-02-04 07:08:40 PST

Created attachment 223110 [details] Screenshot showing caret drawn as bounding box instead of line

Radar WebKit Bug Importer

Comment 3 2014-02-04 11:09:39 PST

<rdar://problem/15980792>

Note You need to log in before you can comment on or make changes to this bug.