Issue with SVG Replacement & Panels IPE dropdowns

I've been using this method (http://voormedia.com/blog/2012/10/displaying-and-detecting-support-for-s...) for SVG replacement for supported retina devices. I have encountered an issue with the panels IPE's dropdowns not working properly. Basically they would display without a background and all the JS/CSS was working improperly. (see attached).

The problematic code is;

<script>
if (document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1")) {
  document.documentElement.className = "svg";
}
</script>

The suggested fix is;

<script>
var $features = new Object();
var $html = document.documentElement;
$features.svg = document.implementation.hasFeature("http://www.w3.org/TR/SVG11/feature#Image", "1.1");
$html.className += ($features.svg) ? " svg" : " no-svg";
</script>

Or to replace images using modernizer:

<script>
$(document).ready(function () {
  if (!Modernizr.svg) {
    $('img[src$=".svg"]').each(function() {
    var $img = $(this);
    $img.attr('src', $img.attr('src').replace(/svg$/, 'png'));
  });
}
</script>