Bug 170853 – SVG does not scale down to container size when container shrinks on transition

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: SVG

[Tim Chiang]

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');
})

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.