<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<style>
* {
box-sizing: border-box;
}
.icon {
height: 58px;
width: 47px;
}
.widget {
border: 1px solid gray;
display: inline-block;
padding: 10px;
}
</style>
</head>
<body>
<h1>Dragging an image in Firefox</h1>
<h2>Works</h2>
<p>Grab the image and drag it. The icon is ghosted as expected.</p>
<p><a class="widget"><img src="text-widget-icon.svg" class="icon"></a></p>
<p>Images are draggable by default.</p>
<h2>Weird zoom effect</h2>
<p>Grab the white area around the image to produce the zoom bug.</p>
<p><a class="widget" draggable="true"><img src="text-widget-icon.svg" class="icon"></a></p>
<p>The difference from the code above is a draggable="true" on the anchor wrapping the icon.</p>
</body>
</html>
Recreating a weird zoom-effect in Firefox.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-456 252 47 58"><style>.st0{fill:#eab03e}.st1{fill:#fff}.st2{fill:none;stroke:#fff;stroke-width:2;stroke-miterlimit:10}</style><path class="st0" d="M-456 252h47v58h-47z"/><path class="st1" d="M-448.12 263v-4.88h-1.76V257h4.79v1.13h-1.74V263h-1.29zm2.66-2.18c0-1.26.93-2.28 2.25-2.28 1.3 0 2.18.97 2.18 2.39v.25h-3.23c.07.55.51 1.01 1.25 1.01.37 0 .88-.16 1.16-.43l.5.74c-.43.4-1.12.6-1.79.6-1.32.01-2.32-.88-2.32-2.28zm2.25-1.37c-.71 0-1.02.53-1.07.96h2.14c-.02-.41-.31-.96-1.07-.96zm5.7 3.55l-.99-1.47-1 1.47h-1.27l1.54-2.23-1.45-2.12h1.28l.9 1.34.89-1.34h1.28l-1.46 2.12 1.56 2.23h-1.28zm2.07-1.08v-2.27h-.72v-1h.72v-1.19h1.15v1.19h.88v1h-.88v1.96c0 .27.14.48.4.48.17 0 .33-.06.4-.13l.24.86c-.17.15-.48.28-.95.28-.81.01-1.24-.41-1.24-1.18z"/><path class="st2" d="M-420.02 275.01H-445V281h9.01v22.03h6.96V281h9.01z"/></svg>