Issue metadata
Sign in to add a comment
|
transformed input inside SVG foreignObject displays text at original offset.
Reported by
andrewjp...@gmail.com,
Apr 29 2018
|
||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36
Steps to reproduce the problem:
1. set up the html:
<html>
<body>
<svg style="border: 1px solid black" width="500" height="200">
<g transform="translate(50 0)">
<foreignObject width="300" height="100" x="20" y="40">
<input xmlns="http://www.w3.org/1999/xhtml" type="text" value="Long Text Does Not Display Correctly If Input Element Is Translated Within SVG"></input>
</foreignObject>
</g>
<g transform="translate(0 50)">
<foreignObject width="300" height="100" x="20" y="40">
<input xmlns="http://www.w3.org/1999/xhtml" type="text" value="This text does not display at all if it's too long"></input>
</foreignObject>
</g>
</svg>
</body>
</html>
2. The foreignObject must have a parent which has been transformed
What is the expected behavior?
Works on Firefox 59.0.2, Safari 11.1
The text should appear inside of the input box, long text should be clipped.
What went wrong?
The input element itself is transformed by the <g> element, but once the text inside the element becomes longer than the container, the text will appear at the position it would have been if no transformation was applied. If the transformation is significant, the text will disappear completely.
In the first box in the example above, the transform is 50 units to the right. The text box appears at the right position, but long text appears 50 units to the left of the box.
In the second box, the text appears 50 units above the box, and is therefore clipped completely.
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 66.0.3359.139 Channel: stable
OS Version: OS X 10.13.4
Flash Version:
Workaround: using a <p> element with contenteditable set, or appending the <foreignObject> to the svg where no transformations have taken place.
,
Apr 30 2018
Fixed in M-67, and we will not be merging back.
,
Apr 30 2018
|
|||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||
Comment 1 by dtapu...@chromium.org
, Apr 30 2018