[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