Fix IE misalignment of content after scroll

This commit is contained in:
Niklas von Hertzen 2014-03-02 18:03:30 +02:00
parent 7ce46e95cd
commit 9bae5b610a
4 changed files with 81 additions and 38 deletions

View File

@ -95,14 +95,29 @@ function createWindowClone(ownerDocument, width, height, options) {
documentClone.write("<!DOCTYPE html>");
documentClone.close();
documentClone.replaceChild(documentClone.adoptNode(documentElement), documentClone.documentElement);
documentClone.replaceChild(removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement);
if (options.type === "view") {
container.contentWindow.scrollTo(window.scrollX, window.scrollY);
container.contentWindow.scrollTo(window.pageXOffset, window.pageYOffset);
}
resolve(container);
});
}
function removeScriptNodes(parent) {
[].slice.call(parent.childNodes, 0).filter(isElementNode).forEach(function(node) {
if (node.tagName === "SCRIPT") {
parent.removeChild(node);
} else {
removeScriptNodes(node);
}
});
return parent;
}
function isElementNode(node) {
return node.nodeType === Node.ELEMENT_NODE;
}
function Font(family, size) {
var container = document.createElement('div'),
img = document.createElement('img'),
@ -334,7 +349,7 @@ LinearGradientContainer.prototype.stepRegExp = /((?:rgb|rgba)\(\d{1,3},\s\d{1,3}
function log() {
if (window.html2canvas.logging && window.console && window.console.log) {
window.console.log.apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
Function.prototype.bind.call(window.console.log, (window.console)).apply(window.console, [(Date.now() - window.html2canvas.start) + "ms", "html2canvas:"].concat([].slice.call(arguments, 0)));
}
}
@ -348,6 +363,8 @@ function NodeContainer(node, parent) {
this.computedStyles = null;
this.styles = {};
this.backgroundImages = null;
this.transformData = null;
this.transformMatrix = null;
}
NodeContainer.prototype.assignStack = function(stack) {
@ -499,32 +516,44 @@ NodeContainer.prototype.parseTextShadows = function() {
};
NodeContainer.prototype.parseTransform = function() {
var transformRegExp = /(matrix)\((.+)\)/;
var transform = this.prefixedCss("transform");
var matrix = parseMatrix(transform.match(transformRegExp));
var offset = this.parseBounds();
if (matrix) {
var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
origin[0] += offset.left;
origin[1] += offset.top;
return {
origin: origin,
matrix: matrix
};
if (!this.transformData) {
if (this.hasTransform()) {
var offset = this.parseBounds();
var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
origin[0] += offset.left;
origin[1] += offset.top;
this.transformData = {
origin: origin,
matrix: this.parseTransformMatrix()
};
} else {
this.transformData = {
origin: [0, 0],
matrix: [1, 0, 0, 1, 0, 0]
};
}
}
return this.transformData;
};
NodeContainer.prototype.parseTransformMatrix = function() {
if (!this.transformMatrix) {
var transform = this.prefixedCss("transform");
var matrix = transform ? parseMatrix(transform.match(this.MATRIX_PROPERTY)) : null;
this.transformMatrix = matrix ? matrix : [1, 0, 0, 1, 0, 0];
}
return this.transformMatrix;
};
NodeContainer.prototype.parseBounds = function() {
return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
};
NodeContainer.prototype.hasTransform = function() {
var transform = this.prefixedCss("transform");
return (transform !== null && transform !== "none" && transform !== "matrix(1, 0, 0, 1, 0, 0)");
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0";
};
NodeContainer.prototype.MATRIX_PROPERTY = /(matrix)\((.+)\)/;
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;

File diff suppressed because one or more lines are too long

View File

@ -88,7 +88,7 @@ function createWindowClone(ownerDocument, width, height, options) {
documentClone.replaceChild(removeScriptNodes(documentClone.adoptNode(documentElement)), documentClone.documentElement);
if (options.type === "view") {
container.contentWindow.scrollTo(window.scrollX, window.scrollY);
container.contentWindow.scrollTo(window.pageXOffset, window.pageYOffset);
}
resolve(container);
});

View File

@ -8,6 +8,8 @@ function NodeContainer(node, parent) {
this.computedStyles = null;
this.styles = {};
this.backgroundImages = null;
this.transformData = null;
this.transformMatrix = null;
}
NodeContainer.prototype.assignStack = function(stack) {
@ -159,32 +161,44 @@ NodeContainer.prototype.parseTextShadows = function() {
};
NodeContainer.prototype.parseTransform = function() {
var transformRegExp = /(matrix)\((.+)\)/;
var transform = this.prefixedCss("transform");
var matrix = parseMatrix(transform.match(transformRegExp));
var offset = this.parseBounds();
if (matrix) {
var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
origin[0] += offset.left;
origin[1] += offset.top;
return {
origin: origin,
matrix: matrix
};
if (!this.transformData) {
if (this.hasTransform()) {
var offset = this.parseBounds();
var origin = this.prefixedCss("transformOrigin").split(" ").map(removePx).map(asFloat);
origin[0] += offset.left;
origin[1] += offset.top;
this.transformData = {
origin: origin,
matrix: this.parseTransformMatrix()
};
} else {
this.transformData = {
origin: [0, 0],
matrix: [1, 0, 0, 1, 0, 0]
};
}
}
return this.transformData;
};
NodeContainer.prototype.parseTransformMatrix = function() {
if (!this.transformMatrix) {
var transform = this.prefixedCss("transform");
var matrix = transform ? parseMatrix(transform.match(this.MATRIX_PROPERTY)) : null;
this.transformMatrix = matrix ? matrix : [1, 0, 0, 1, 0, 0];
}
return this.transformMatrix;
};
NodeContainer.prototype.parseBounds = function() {
return this.bounds || (this.bounds = this.hasTransform() ? offsetBounds(this.node) : getBounds(this.node));
};
NodeContainer.prototype.hasTransform = function() {
var transform = this.prefixedCss("transform");
return (transform !== null && transform !== "none" && transform !== "matrix(1, 0, 0, 1, 0, 0)");
return this.parseTransformMatrix().join(",") !== "1,0,0,1,0,0";
};
NodeContainer.prototype.MATRIX_PROPERTY = /(matrix)\((.+)\)/;
NodeContainer.prototype.TEXT_SHADOW_PROPERTY = /((rgba|rgb)\([^\)]+\)(\s-?\d+px){0,})/g;
NodeContainer.prototype.TEXT_SHADOW_VALUES = /(-?\d+px)|(#.+)|(rgb\(.+\))|(rgba\(.+\))/g;