jSignature on mobile - hiding canvas and then showing blanks sig

Question

Using jSignature, and I'm pulling the image string out of the database (base30). I check what comes out of the database, and do the following: 1. Hide my clear button 2. Show my edit button 3. Import my base 30 data into the jsignature div 4. Create an image from jsignature, and show that in an image div 5. hide my jsignature div

if ($("input[name=hiddenSigData]").length)
{
$(".clrButton").hide();
$(".editButton").show();
$(".signature").jSignature("importData", 'data:'+ 
$("input[name=hiddenSigData]").val());


var datapair = $sigdivAppt.jSignature("getData", "svgbase64") 
 var i = new Image()
 i.src = "data:" + datapair[0] + "," + datapair[1] 
  $(".divImageofSig").html('');
  $(i).appendTo($(".divImageofSig")) // append the image (SVG) to DOM.                 
$('.sigWrapper').hide();

}

I catch edit with this:

        $(".editButton").on("click", function(e) {
                $(".clrButton").show();
                $(".cancelEditButton").show();
                $(".editButton").toggle();
                $(".divImageofSig").hide();
                $(".sigWrapper").show();
                 window.dispatchEvent(new Event('resize'));

        });

On desktop, this works perfectly (FF/Chrome). Shows the right buttons, hides the image div, and shows the signature div, which looks like this btw:

    <div class='sigWrapper'><div class="parentofsignature">
        <div class="signature"></div>
        </div>
    </div>
    <div class='divImageofSig'></div>

BUT: On mobile, when I click edit, the image div hides, and the jsignature div appears blank. I know it's been populated, because if I skip the initial hiding that I described above, both divs will show up.

Here's what is REALLY weird: if I hit cancel, and then edit again, it shows up fine!!

Here's my cancel function:

$(".cancelEditButton").on("click", function(e) {
            $(".divImageofSig").toggle();
            //$(".sigWrapper").toggle();
            $(".clrButton").toggle();
            $(".editButton").toggle();
            if ($("input[name=hiddenSigData]").length)
            {           

                $sigdivAppt.jSignature("importData", 'data:'+ $("input[name=hiddenSigData]").val());


               var datapair = $sigdivAppt.jSignature("getData", "svgbase64") 
               var i = new Image()
               i.src = "data:" + datapair[0] + "," + datapair[1] 
               $(".divImageofSig").html('');
               $(i).appendTo($(".divImageofSig")) // append the image (SVG) to DOM.
                $('.sigWrapper').hide();
             }
            });

So the question is: why does hiding a div containing a jsignature canvas, and then re-showing it cause it to blank out? This is happening in mobile safari and in chrome for iOS.