带有 AngularJS 工具提示的画布内容在 Mac 上的 Chrome 49 上消失 [英] Canvas content disappears on Chrome 49 on Mac with an AngularJS tooltip

查看：18
本文介绍了带有 AngularJS 工具提示的画布内容在 Mac 上的 Chrome 49 上消失的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到的问题 - 当我在打开新选项卡的按钮上有工具提示时，HTTP 画布的内容消失了.

这是一个非常具体的症状，所以我会试着带你了解一下.

我可以使用以下 HTML 重现它，但不幸的是不能在 plunker 或 jsfiddle 中重现:

<头><风格>.容器 {高度:300px；宽度:300px；}帆布 {边框:1px纯黑色}按钮 {边距顶部:15px；}</风格><body ng-app="CanvasTooltipApp"><div ng-controller="CanvasTooltipCtrl" class="container"><canvas id="myCanvas" height="300"></canvas><button type="button" ng-click="clickMe()" tooltip="工具提示文本">点击我</button>

<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><脚本>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');};});</html>

  1. 它仅在 Mac 上的 Chrome 49 上重现.

  2. 要重现:单击按钮(在工具提示出现之前！)，将打开一个新选项卡.等待几秒钟.也许打开另一个新标签.然后关闭所有选项卡并返回原始选项卡.画布的形状应该消失.

  3. 我使用 AngularJS 1.3.15 和 angular-ui-bootstrap 0.14.3.它似乎没有使用简单的引导工具提示进行复制.只有使用 angular-ui-bootstrap 才能重现它.

  4. 升级 angular-ui-bootstrap 版本没有帮助.

  5. 不会在其他浏览器或其他操作系统上复制.

就是这样，我想.我希望你甚至可以在没有 plunker/fiddle 的情况下成功复制它.

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

解决方案

我自己也遇到过这个问题，不过情况略有不同 (画布在 OS X 上的 Chrome 49 上消失，看起来像一个错误)，并且有一个 plunker:

https://plnkr.co/edit/z4x9i8qqfjTOJDxihaG4

窗口模式(症状出现的地方):https://run.plnkr.co/gl9nbHY1044dEJUI/

HTML:

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

看起来是同样的问题.我已提交 Chrome 错误报告.

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

解决方案

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.

这篇关于带有 AngularJS 工具提示的画布内容在 Mac 上的 Chrome 49 上消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆