在Firefox中滾動時渲染到由DIV標記的特定區域

使用覆蓋整個視圖的畫布我想在由div容器標記的區域繪製旋轉三角形。在Firefox中滾動時渲染到由DIV標記的特定區域

但是，由於滾動，Firefox並不總是將三角形繪製到div佔位符中。請參閱picture（忽略重複的背景圖片）和demo。 Chrome在滾動時正確呈現三角形。

我的代碼是錯誤的還是Firefox的執行速度不夠快，無法在滾動時將三角形渲染到正確的位置？

算法：

初始化：

創建大帆布覆蓋整個視圖，得到WebGL的上下文
分配緩衝區用於呈現三角形

渲染循環：

如果在div佔位符是那麼當前視圖：

設置渲染與gl.viewport座標匹配的div佔位符的位置
呈現三角（實際方向是從衍生的日期（））

代碼：

var triangle; 
var gl; 

function drawScenes() { 
    gl.clear(gl.COLOR_BUFFER_BIT); 
    if(isScrolledIntoView('#div0')) { 
    // set up viewport for rendering on top of the div placeholder 
    var docViewTop = $(window).scrollTop(); 
    gl.viewport(0, $('#canvas').height() + docViewTop - 400, 200, 200); 
    triangle.render(); 
    } 
    requestAnimFrame(drawScenes); 
} 

function start() { 
    createOverlayCanvas('canvas'); 
    gl = initGL('canvas'); 
    triangle = new Triangle(gl); //sets up the buffers 
    drawScenes(); 
}

我使用Ubuntu 11.10與Nvidia的專有的驅動程序。

背後的動機是我想擁有多個佔位符並將不同的對象渲染到它們中的每一箇中。爲什麼我不使用多個畫布？

初始化一個帆布是
當繪製一個具體的目的是多個佔位符，對象數據是共享的速度更快。與多個畫布不同，我們不能共享狀態。

謝謝你的幫助。

來源

2012-02-02 David Hrachovy

我與我的Firefox 9.0.1嚐到它現在（在Windows 7），它的工作原理完全一樣鉻...

嘗試更新您的Firefox或報告mozzila的bug ......

來源

2012-02-02 13:26:54 matan7890

這很奇怪。我試過Firefox 9.0.1，問題依然存在。你是否試圖抓住滾動條並將其快速移動？ – 2012-02-02 14:35:51

在Firefox中滾動時渲染到由DIV標記的特定區域

回答

相關問題