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>
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
<rdar://problem/15980792>