Inline SVG element is not resized correctly
Reported by
al.govor...@gmail.com,
Apr 4 2018
|
|||||||||
Issue descriptionUserAgent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36 Example URL: Steps to reproduce the problem: 1. Go to https://jsfiddle.net/no6gz0tp/46/ 2. Click the button 'click me' What is the expected behavior? Height and width of the SVG element are changed. What went wrong? Only height of the SVG element is changed. Width stays the same. Does it occur on multiple sites: N/A Is it a problem with a plugin? No Did this work before? N/A Does this work in other browsers? Yes Chrome version: 67.0.3387.0 Channel: canary OS Version: 10.0 Flash Version: If you resize the viewport after click on the button, the browser is forced to redraw the SVG element and set right width and height. Also I found two workarounds: 1. Remove flexbox properties from the container element. 2. Set 'position: relative' to the container and 'absolute' to the SVG element. Reproduced on 65.0.3325.181 and 67.0.3387.0 builds, both Windows 10 and Mac.
,
Apr 4 2018
,
Apr 5 2018
Thanks for filing the issue! Checked the issue on reported chrome version 67.0.3387.0 and on 65.0.3325.181 using Windows 10 and Mac 10.13.1 with the below mentioned steps. 1. Launched Chrome 2. Navigated to https://jsfiddle.net/no6gz0tp/46/ 3. Clicked on "Click me" button. When clicked on the button we observed Change in width of red(Inner) div and height of black(Outer) div. Attaching the screen cast of the same. @al.govorkova: Could you please have a look at the screen cast and let us know if we have missed anything. And also please clarify us on your comment#0 regarding the workaround provided, i.e., did the issue got resolved so that we can close it. Any further inputs from your end may help us.
,
Apr 5 2018
Hi! I think I missed some details in the description. The SVG element is the red rectangle. It has viewbox 1024:768 and it should save aspect ratio independently of parent's height. So when you click on the button, both width and height of the red rectangle should be changed. Please compare the attached videos with wrong behavior (the same as your video) and with right behavior. I found the workarounds, but it doesn't resolve the initial issue. The bug shouldn't be reproduced with different conditions, doesn't matter if I use flexbox, absolute positioning or no.
,
Apr 5 2018
Thank you for providing more feedback. Adding the requester to the cc list. For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot
,
Apr 5 2018
,
Apr 5 2018
,
Apr 5 2018
Able to reproduce the issue on Mac 10.13.3, Win-10 and Ubuntu 14.04 using chrome reported version #67.0.3387.0 and latest stable #65.0.3325.181. This is a non-regression issue as it is observed from M60 old builds. Hence, marking it as untriaged to get more inputs from dev team. Thanks...!!
,
Apr 5 2018
,
Apr 11 2018
,
Dec 4
Hi, I stamped on the same issue at https://codepen.io/tomalec/pen/KrLdQW?editors=1100 For my case I also found another alternative workaround, which seem not to work in one from OP: Use non-zero `vh` in SVG's height.
,
Dec 4
Also, none of workarounds above helps with `inline-flex` containers: https://jsfiddle.net/tomalec/pco8s1uf/18/ |
|||||||||
►
Sign in to add a comment |
|||||||||
Comment 1 by krajshree@chromium.org
, Apr 4 2018