| 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: | P2 | Keywords: | InRadar | ||||||
| Version: | 528+ (Nightly build) | ||||||||
| Hardware: | iPhone / iPad | ||||||||
| OS: | iOS 7.0 | ||||||||
| Attachments: |
|
||||||||
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>
Created attachment 223110 [details]
Screenshot showing caret drawn as bounding box instead of line
|
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>