帆布内容在Chrome 49消失在Mac上用AngularJS提示 [英] Canvas content disappears on Chrome 49 on Mac with an AngularJS tooltip
问题描述
我的问题 - 一个HTTP画布的内容消失了，当我有在打开一个新的标签按钮的工具提示
。这是一个非常特殊的症状，所以我想尝试引导您完成它。
我能够用下面的HTML重现它，而不是在一个plunker或的jsfiddle不幸：
＆LT; HTML和GT;
＆LT; HEAD＆GT;
＆LT;风格＆GT;
。容器 {
高度：300像素;
宽度：300像素;
} 帆布{
边框：1px的纯黑色
} 按钮{
的margin-top：15px的;
}
＆LT; /风格＆GT;
＆LT; /头＆GT;＆LT;机身NG-应用=CanvasTooltipApp＆GT;
＆LT; DIV NG控制器=CanvasTooltipCtrl级=容器＆GT;
＆所述;帆布的id =myCanvas高度=300＆GT;＆下; /画布＆GT;
＆LT;按钮式=按钮NG点击=clickMe（）工具提示=提示文本＆gt;点击ME＆LT; /按钮＆GT;
＆LT; / DIV＆GT; ＆所述; SCRIPT SRC =https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js＆GT;＆下; /脚本＆GT;
＆LT;脚本src=\"https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js\"></script> ＆LT;脚本＆GT;
angular.module（'CanvasTooltipApp'，['ui.bootstrap']）; angular.module（'CanvasTooltipApp'）。配置（函数（$ tooltipProvider）{
$ tooltipProvider.options（{popupDelay：1500}）;
}）; angular.module（'CanvasTooltipApp'）。控制器（'CanvasTooltipCtrl'，函数（$范围）{
变种帆布=的document.getElementById（'myCanvas'）;
变种CTX = canvas.getContext（'2D'）;
ctx.beginPath（）;
ctx.arc（95，50，40，0，2 * Math.PI）;
ctx.stroke（）; $ scope.clickMe =功能（）{
window.open（'http://www.google.com'，'_blank'）;
};
}）;
＆LT; / SCRIPT＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
-
它仅在Chrome 49在Mac上复制的。
-
要重现：点击按钮（！出现提示之前），一个新的标签将被打开。等待几秒钟。也许，打开另一个新的标签。然后关闭所有选项卡，并返回到原来的标签。画布的形状应消失。
-
我用AngularJS 1.3.15和角度-UI-引导0.14.3。
它似乎并不与普通的引导提示进行复制。
只有它再现了自举角UI。 -
升级角UI的引导版本不提供帮助。
-
这不是复制在其他浏览器，或其他操作系统。
就这样，我想。
我希望你甚至再现它没有plunker /小提琴成功。
非常感谢您在任何情况下！
丹尼尔
我这个打自己，虽然略有不同的情况下（<一个href=\"http://stackoverflow.com/questions/36199101/canvas-disappearing-on-chrome-49-on-os-x-looks-like-a-bug\">Canvas就消失在OS X上的Chrome 49，看起来像一个bug ），并有plunker：
https://plnkr.co/edit/z4x9i8qqfjTOJDxihaG4
窗口模式（其中症状表现）：
https://run.plnkr.co/gl9nbHY1044dEJUI/
HTML
＆LT; DIV＆GT;
＆LT; DIV＆GT;
＆LT;输入类型=数字级=表格控占位符=重点来了/＆GT;
＆LT; / DIV＆GT;
＆LT; DIV＆GT;
＆LT; DIV＆GT;
＆LT;帆布ID =行级=图图线的图表数据=数据排行榜标签=标签排行榜传奇=真的图表系列=系列＆GT;
＆LT; /帆布＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
看起来像同样的问题。我已经提交了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>
It is reproduced only on Chrome 49 on a Mac.
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.
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.
Upgrading the angular-ui-bootstrap version does not help.
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.
这篇关于帆布内容在Chrome 49消失在Mac上用AngularJS提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
