Question

我遇到的问题 - 当我在打开新标签的按钮上有工具提示时，HTTP画布的内容会消失。

这是一个非常具体的症状，所以我试着引导你完成它。

我能够使用以下HTML重现它，但遗憾的是不能在plunker或jsfiddle中重现它：

<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>

仅在Mac上的Chrome 49上重现。
要重现：单击按钮（在工具提示出现之前！），将打开一个新选项卡。等几秒钟。也许打开另一个新标签。然后关闭所有选项卡并返回原始选项卡。画布的形状应该消失。
我使用AngularJS 1.3.15和angular-ui-bootstrap 0.14.3。它似乎没有使用普通的bootstrap工具提示进行复制。只有使用angular-ui-bootstrap才能复制它。
升级angular-ui-bootstrap版本无济于事。
不会在其他浏览器或其他操作系统上复制。

我想，那是它。我希望你能成功地复制它而不需要一个傻瓜/小提琴。

无论如何，非常感谢你！丹尼尔

Answer 1

我自己也打过这个，虽然情况略有不同（Canvas disappearing on Chrome 49 on OS X, looks like a bug），并且有一个掠夺者：

https://plnkr.co/edit/z4x9i8qqfjTOJDxihaG4

窗口模式（症状出现的地方）： 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>

看起来像是同一个问题。我已经提交了Chrome错误报告。

使用AngularJS工具提示，Mac上的Chrome 49上的Canvas内容消失

1 个答案: