canvas.js: workaround WebKit bug, issue #28.

This is WebKit bug https://bugs.webkit.org/show_bug.cgi?id=46319

The workaround is to wrap Canvas render functions with a function that
sets a flush timer. The flush function sets the right margin and then
1ms later sets it back. This triggers the canvas to redraw with the
correct contents.

Two downsides:
- rendering is slower, but only on the busted versions of webkit.
  Correct and useful is better than fast and useless.
- There is a barely perceptible jitter of the control buttons because
  the canvas size is changing by one pixel.

To support this functionality, we also have to read out the exact
webkit version from the user agent in the render engine detection code
in include/util.js.
This commit is contained in:
Joel Martin 2010-11-06 12:23:23 -05:00
parent 5286528f5b
commit 9e01c5701e
2 changed files with 44 additions and 2 deletions

View File

@ -25,8 +25,10 @@ var that = {}, // Public API interface
c_keyPress = null,
c_mouseButton = null,
c_mouseMove = null;
c_mouseMove = null,
c_webkit_bug = false,
c_flush_timer = null;
// Configuration settings
function cdef(v, type, defval, desc) {
@ -91,7 +93,7 @@ that.get_height = function() {
function constructor() {
Util.Debug(">> Canvas.init");
var c, ctx, imgTest, tval, i, curDat, curSave,
var c, ctx, func, origfunc, imgTest, tval, i, curDat, curSave,
has_imageData = false, UE = Util.Engine;
if (! conf.target) { throw("target must be set"); }
@ -159,6 +161,26 @@ function constructor() {
that.cmapImage = that.cmapImageFill;
}
if (UE.webkit && UE.webkit >= 534.7 && UE.webkit <= 534.9) {
// Workaround WebKit canvas rendering bug #46319
conf.render_mode += ", webkit bug workaround";
Util.Debug("Working around WebKit bug #46319");
c_webkit_bug = true;
for (func in {"fillRect":1, "copyImage":1, "rgbxImage":1,
"cmapImage":1, "blitStringImage":1}) {
that[func] = (function() {
var myfunc = that[func]; // Save original function
//Util.Debug("Wrapping " + func);
return function() {
myfunc.apply(this, arguments);
if (!c_flush_timer) {
c_flush_timer = setTimeout(that.flush, 100);
}
};
})();
}
}
/*
* Determine browser support for setting the cursor via data URI
* scheme
@ -483,6 +505,18 @@ that.stop = function() {
}
};
that.flush = function() {
var old_val;
//Util.Debug(">> flush");
// Force canvas redraw (for webkit bug #46319 workaround)
old_val = conf.target.style.marginRight;
conf.target.style.marginRight = "1";
c_flush_timer = null;
setTimeout(function () {
conf.target.style.marginRight = old_val;
}, 1);
};
that.setFillColor = function(color) {
var rgb, newStyle;
if (conf.true_color) {

View File

@ -208,6 +208,14 @@ Util.Engine = {
'gecko': (function() {
return (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18); }())
};
if (Util.Engine.webkit) {
// Extract actual webkit version if available
Util.Engine.webkit = (function(v) {
var re = new RegExp('WebKit/([0-9\.]*) ');
v = (navigator.userAgent.match(re) || ['', v])[1];
return parseFloat(v, 10);
})(Util.Engine.webkit);
}
Util.Flash = (function(){
var v, version;