0

新しいタブを開くボタンにツールチップが表示されていると、HTTPキャンバスのコンテンツが消えてしまいます。MacのChrome 49でAngularJSツールチップを使用してキャンバスのコンテンツが消える

これは非常に具体的な症状ですので、私はあなたを歩いてみてください。

私は、次の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> 
  1. これは、Mac上のChromeのみ49上に再現されます。

  2. 再生するには:(ツールチップが表示される前に!)ボタンをクリックすると、新しいタブが開きます。数秒待ってください。おそらく別の新しいタブを開くかもしれません。その後、すべてのタブを閉じて元のタブに戻ります。キャンバスの形が消えるはずです。

  3. 私は、AngularJS 1.3.15とangle-ui-bootstrap 0.14.3を使用します。 普通のブートストラップのツールチップでは再現されていないようです。 角度uiブートストラップでのみ再生されます。

  4. angle-ui-bootstrapのバージョンをアップグレードすることは役に立ちません。

  5. 他のブラウザや他のOSでは再生されません。

これはそうだと思います。 私はあなたがplunker/fiddleなしでそれを再現することに成功したことを願っています。

大変ありがとうございます! ダニエル

答えて

0

私はわずかに異なる状況(Canvas disappearing on Chrome 49 on OS X, looks like a 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のバグレポートを提出しました。

+0

興味深いことに、参考にしていただきありがとうございます。 Chromeのバグレポートへのリンクを投稿してください。 ありがとうございます –

+1

さて、Chromeは49.0.2623.108に自動更新され、バグは消えました。私はもうあなたのことを再現することはできませんので、私はあなたの更新をお勧めします! –

+0

これはChromeのこのドロップで修正されたバグレポートです - https://codereview.chromium.org/1762783002 –

関連する問題