[Webkit-unassigned] [Bug 170853] New: SVG does not scale down to container size when container shrinks on transition
bugzilla-daemon at webkit.org
bugzilla-daemon at webkit.org
Fri Apr 14 11:16:15 PDT 2017
https://bugs.webkit.org/show_bug.cgi?id=170853
Bug ID: 170853
Summary: SVG does not scale down to container size when
container shrinks on transition
Product: WebKit
Version: Safari 10
Hardware: Unspecified
OS: Unspecified
Status: NEW
Severity: Normal
Priority: P2
Component: SVG
Assignee: webkit-unassigned at lists.webkit.org
Reporter: timolawl at gmail.com
CC: zimmermann at kde.org
Working example: http://codepen.io/timchiang/pen/qmEKLM
At the time of testing, the scale down of the SVG works in Chrome 57 and Firefox 52. In Safari 10.1 and iOS Safari (and also iOS Chrome app, since it also uses the iOS WebKit rendering engine there), the scale down does not work. To illustrate that it does not work, I have added in the "overflow: hidden" CSS property to demonstrate that the outer container shrinks between the two states.
Removing the commented code in both the HTML and CSS portions serves as my current solution to restore the expected scale down response of the SVG across rendering engines.
Pasting the working example code here in case something happens to the link:
HTML:
<div class='div'>
<!-- <div class='container'> -->
<svg class='svg' version='1.1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'>
<polygon points='10,0 0,10 0,0' style='stroke:#000; fill: #0ff'/>
</svg>
<!-- </div> -->
</div>
CSS:
.div {
overflow: hidden;
height: 150px;
width: 150px;
transition: all 0.5s ease-in-out;
}
.div.big {
height: 50px;
width: 50px;
}
/*
.container {
position: relative;
}
.svg {
position: absolute;
top: 0;
left: 0;
}
*/
JavaScript:
document.querySelector('.div').addEventListener('click', () => {
document.querySelector('.div').classList.toggle('big');
})
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20170414/f1e1c4ac/attachment.html>
More information about the webkit-unassigned
mailing list