Repository navigation
Strange bug in alpha 48 with svg graphics #5654
Description
This is strange and took me a while to come up with a simple test case, this worked in alpha 46 and no longer works in alpha 48. If you use the html below in straight browser and in a component with alpha 46, you end up with a 40px square. However, in alpha 48 you end up with a 200px square.
<div style="width: 40px; height: 40px">
<svg viewbox="0 0 200 200">
<rect width="200" height="200"/>
</svg>
</div>
For others who might be struggling with this the way to fix this in the meantime in alpha 48 is to insert a scale transform like this
<div style="width: 40px; height: 40px">
<g transform="scale(0.2)">
<svg viewbox="0 0 200 200">
<rect width="200" height="200"/>
</svg>
</g>
</div>
Something in alpha 48 is producing something different then the straight browser behavior and alpha 46 some I'm assuming that's the culprit and not alpha 46. However, by a quick check of the w3 specs it might seem that the correct literal rendering might be alpha 48 and browsers are automagically doing a scaling in the background. Nonetheless, inconsistent behavior is a bigger problem so I think alpha 48 is the one that should be fixed.
Activity
kylecordes commentedon Dec 6, 2015
The most obvious culprit is not anything directly related to SVG support, but rather that the way Angular 2 processes templates has changed quite radically in the last few weeks. Formerly the browser provided the muscle to parse the HTML template, now this is done by JavaScript code in Angular 2. there are couple of rough edges here, there is another item about how it will change slightly to fix the rough edges. But I suspect you would find, inspecting the DOM for your SVG between Alpha 46 and 48, that you are getting a different DOM shape.
user414 commentedon Dec 6, 2015
Now I don't have it in front of me, but If I remember correctly the DOM structure was similar but the computed attribute of each element like width/height/etc... was definitely different between 46 and 48. I tried to make a simpler test code without the SVG, but I don't think I understand enough the internals to do that in a reasonable amount of time.
vicb commentedon Dec 6, 2015
I believe #5629 will fix this issue
vicb commentedon Dec 8, 2015
#5629 has been merged into master (not released yet)
user414 commentedon Dec 20, 2015
Great tested in the latest beta and confirm #5629 fixed this issue as well, thanks.
angular-automatic-lock-bot commentedon Sep 7, 2019
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.