"Transcribe Text" popup dialogue box does not appear in IE11

[shaunanoordin]

Major Issue.
Yes, IE11 again.

Expected Behaviour:

• After choosing Transcribe Text tool, first click should deploy an animated circle indicating start of text.
• Second click should deploy a second circle indicating the end of text, stop the animation and cause the Transcribe Text popup dialogue box to appear.

Actual Behaviour:

• In IE11, the first click deploys a red (non-animated) circle.
• The second click does not deploy the second circle, and the popup dialogue box does not appear.
• Strangely, the text cursor (indicating an ) can still be seen floating where the popup dialogue should have appeared.

Diagnosis:

• The popup dialogue box is actually there, but it's hidden behind the subject image, background, etc.
  • Specifically, div.transcribe-dialog does not receive the .-active CSS class, which would shift its z-position from .transcribe-dialog { z-index: -1 } to .transcribe-dialog.-active { z-index: 2 }
• This is quite potentially an issue with Angular on IE11, as an exception occurs right after the second click is detected.
  • (Exception thrown is: "Object doesn't support property or method 'contains'", which is consistent with previous IE11 errors where an SVG element doesn't contain standard HTML element functions, such as .find(). See issue On Microsoft Edge 20, no Subject Images are loaded during the 'transcribe' phase. #142 )

Tested On:

• IE11 / Win 8.1 VM

[simoneduca]

@shaunanoordin thanks. I think this is the same issue: angular/angular.js#10259

[shaunanoordin]

Exception Analysis:

• The lowest level / where the Exception is thrown:

    classBasedAnimationsQueue = classBasedAnimationsQueue.sort(function(a,b) {
        return b.node.contains(a.node);
        /*EXCEPTION THROWN: Object doesn't support property or method 'contains'*/
    }).map(function(entry) { return entry.fn;});

• Tracing up, we see that this is part of an $rootScope.$$postDigest() call within a call to $$AnimationProvider.$get
• Tracing further up, we see the entry point to the Angular library here:

function textTool($rootScope, $timeout, AnnotationsFactory, MarkingSurfaceFactory) {
...snip...
    function _endLine(event, annotation) {
        var point = MarkingSurfaceFactory.getPoint(event);
        AnnotationsFactory.upsert(_.extend(annotation, {
            complete: true,
            endPoint: {
                x: point.x,
                y: point.y
            }
        }));
        $rootScope.$apply();
    }
...snip...
}