画布内容在Mac上的Chrome 49上消失，并带有AngularJS工具提示

我遇到的问题-当我在打开新选项卡的按钮上有工具提示时，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。它似乎没有用一个简单的引导工具提示来复制。只有有了棱角分明的ui引导程序，它才会被复制。
升级angular ui引导程序版本没有帮助。
它不会在其他浏览器或其他操作系统上复制。

我想就是这样。我希望你甚至能成功地复制它而不需要一把小提琴。

无论如何，非常感谢！Daniel

我自己也遇到过这个问题，尽管情况略有不同（Canvas在OS X上的Chrome 49上消失，看起来像一个bug），并且有一个plunker：

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漏洞报告。

相关内容

最新更新

热门标签：