Question

当我将鼠标悬停在显示工具提示的元素上时，画布会闪烁。问题只有谷歌浏览器我正在使用的版本是：Mac上的Version 49.0.2623.112 (64-bit)。

当有人遇到同样的问题时。

显示工具提示的代码

<div ng-show="model.nbPlay > 0" class="totals-block">
    <div tooltip-placement="right" uib-tooltip="{{model.nbPlay}} plays">
        <i ng-show="model.isPlayed" class="fa fa-play fa-orange"style="margin-left: 2px;"></i>
        <i ng-show="!model.isPlayed" class="fa fa-play" style="margin-left: 2px;"></i>
        <span class="track-nb-stat">{{model.nbPlay}}</span>
    </div>
</div>

带有画布的HTML

<div id="canvas-container-{{model.selector}}" class="waveform-container track-height no-overflow">
    <div id="player-container-{{model.selector}}" class="player-container track-height">
        <div id="jquery-jplayer-{{model.selector}}" class="jp-audio" ></div>
        <div id="jp-seek-bar-{{model.selector}}" class="jp-seek-bar track-height">
            <div id="sc-jp-play-bar-{{model.selector}}" class="jp-play-bar sc-jp-play-bar">
                <canvas id="canvas-bg-{{model.selector}}" class="canvas canvas-context" width="1024" height="75" ng-click="play()"></canvas>
                <canvas id="canvas-mouse-{{model.selector}}" class="cursor-canvas canvas-context" width="1024" height="75"></canvas>
                <canvas id="canvas-progress-{{model.selector}}" class="cursor-canvas canvas-context" width="1024" height="75"></canvas>
                <canvas id="canvas-time-{{model.selector}}" class="time-canvas canvas-context" width="1024" height="75"></canvas>
            </div>
        </div>
    </div>
</div>

将图像加载到画布中的javascript

loadWaveForm: function (waveform) {
    if (this.getCanvasBgContext()) {
        var that = this;
        var ctx = this.getCanvasBgContext();
        waveform.onload = function () {
            ctx.clearRect(0, 0, that.getCanvasBg().width, that.getCanvasBg().height);
            ctx.drawImage(waveform, 0, 0);
        }
    }
},

使用ui-bootstrap工具提示时画布闪烁

0 个答案: