New issue
Advanced search Search tips

Issue 800987 link

Starred by 1 user

Issue metadata

Status: Duplicate
Merged: issue 771852
Owner: ----
Closed: Jan 2018
Components:
EstimatedDays: ----
NextAction: ----
OS: Windows
Pri: 2
Type: Bug



Sign in to add a comment

Transform applied on the parent SVG or SVG group is not applied to the input element added under foreignobject

Reported by 2024yand...@moundsviewschools.org, Jan 10 2018

Issue description

UserAgent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

Steps to reproduce the problem:
Add the below code to an html page and open the page in a chrome browser.

<svg xmlns="http://www.w3.org/2000/svg"
  x="0px" y="0px" width="600px" height="30px" viewBox="0 0 600 30">
  <g transform="translate(30,0)">
    <rect x="0px" y="0px" width="170px" height="30px" fill="#77BC1F" fill-opacity="0.45"></rect>
    <foreignObject x="0px" y="0px" width="600px" height="30px">
      <div xmlns="http://www.w3.org/1999/xhtml">
        <input value="#1.Hello World! #2.Hello World! #3.Hello World!" />
      </div>
    </foreignObject>
  </g>
</svg>
<style>
  input {
    font-size: 20px;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
    text-overflow: ellipsis;
    border: 0;
    background-color: transparent;
    line-height: 35px;
    width: 170px;
  }
</style>

What is the expected behavior?
Value of the input should be properly shown inside the input field.

What went wrong?
Value is clipped as the transformation applied to the parent svg or group is not honored by the input field inside the foreignobject element.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 63.0.3239.132  Channel: stable
OS Version: 6.1 (Windows 7, Windows Server 2008 R2)
Flash Version: 

Issue is only observed when value of the input text is long.
In my requirement I am using ellipsis for the text to suffix "..." if the value is too long, so I can not use text-indent to offset the adjust the text position as that will not work as expected if the text is small. I am looking for a generic solution where I do not have to depend on the transforms applied to the parent elements.

This is working fine in the Safari browser.
 
ExpectedOutput.png
1.1 KB View Download
IncorrectOutput.png
1.3 KB View Download
SvgInputClippingScript.txt
742 bytes View Download
Mergedinto: 771852
Status: Duplicate (was: Unconfirmed)

Sign in to add a comment