Canvas content disappears on Chrome 49 on Mac with

2019-08-16 13:04发布

问题:

The problem I have - the content of an HTTP canvas disappears, when I have a tooltip on a button that opens a new tab.

This is a very specific symptom, so I'd try to walk you through it.

I'm able to reproduce it with the following HTML, but not in a plunker or jsfiddle unfortunately:

<html>
<head>
    <style>
        .container {
            height: 300px;
            width: 300px;
        }

        canvas {
            border: 1px solid black
        }

        button {
            margin-top: 15px;
        }
    </style>
</head>

<body ng-app="CanvasTooltipApp">
    <div ng-controller="CanvasTooltipCtrl" class="container">
        <canvas id="myCanvas" height="300"></canvas>
        <button type="button" ng-click="clickMe()" tooltip="The Tooltip Text">Click Me</button>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js"></script>

    <script>
        angular.module('CanvasTooltipApp', ['ui.bootstrap']);

        angular.module('CanvasTooltipApp').config(function($tooltipProvider) {
            $tooltipProvider.options({popupDelay: 1500});
        });

        angular.module('CanvasTooltipApp').controller('CanvasTooltipCtrl', function($scope) {
            var canvas = document.getElementById('myCanvas');
            var ctx = canvas.getContext('2d');
            ctx.beginPath();
            ctx.arc(95, 50, 40, 0, 2 * Math.PI);
            ctx.stroke();

            $scope.clickMe = function() {
                window.open('http://www.google.com', '_blank');
            };
        });
    </script>
</body>
</html>
  1. It is reproduced only on Chrome 49 on a Mac.

  2. To reproduce: click on the button (before the tooltip appears!), a new tab would be opened. Wait a few secs. Perhaps open another new tab. Then close all tabs and go back to the original tab. The shape of the canvas should disappear.

  3. I use AngularJS 1.3.15 and angular-ui-bootstrap 0.14.3. It does not seem to be reproduced with a plain bootstrap tooltip. Only with the angular-ui-bootstrap it is reproduced.

  4. Upgrading the angular-ui-bootstrap version does not help.

  5. It is not reproduced on other browsers, or on other OSs.

That's it, I think. I hope you even succeed in reproducing it without a plunker/fiddle.

Thank you very much in any case! Daniel

回答1:

I've hit this myself, though in slightly different circumstances (Canvas disappearing on Chrome 49 on OS X, looks like a bug), and have a plunker:

https://plnkr.co/edit/z4x9i8qqfjTOJDxihaG4

Windowed mode (where the symptom manifests): https://run.plnkr.co/gl9nbHY1044dEJUI/

HTML:

<div>
  <div>
    <input type="number" class="form-control" placeholder="Focus here" />
  </div>
  <div>
    <div>
      <canvas id="line" class="chart chart-line" chart-data="data" chart-labels="labels" chart-legend="true" chart-series="series">
      </canvas>
    </div>
  </div>
</div>

Looks like the same issue. I've filed a Chrome bug report.