Johan Beronius

What "crispEdges" does is basically it disables anti-aliasing.
The reason one pixel lines look blurred is that SVG, just like Canvas, considers whole numbered coordinates to fall in between pixels.
If you draw a line with a 1px wide stroke on a half coordinate it will look sharp even without "crispEdges".
See the example, the first line will produce a two pixel wide gray line due to anti-aliasing, but both the other lines will produce a sharp one pixel wide black line.

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"> <line x1="0" y1="4" x2="16" y2="4" stroke="#000" stroke-width="1" /> <line x1="0" y1="8" x2="16" y2="8" stroke="#000" stroke-width="1" shape-rendering="crispEdges"/> <line x1="0" y1="11.5" x2="16" y2="11.5" stroke="#000" stroke-width="1" /> </svg>

Since the estimated max-height, 1000px in this example, must exceed the actual height with a good margin there will be a delay when transitioning down from this max-height before it starts to actually limit the real height.
This delay can be minimized using an easing curve with a steep leading edge:
transition-timing-function: cubic-bezier(0, 1, 0, 1)
Be sure not to use the same easing curve when transitioning up.