此问题是由被固定在Chrome WebKit中的错误引起的,而不是在Safari:
https://bugs.webkit.org/show_bug.cgi?id=105979
描述:的getComputedStyle()返回经缩放值,如left属性,右,顶部和底部(当一个元素的'位置'是'相对'时)。这使得不可能依赖这些值。
这是在错误报告中提供的测试案例:
https://bug-105979-attachments.webkit.org/attachment.cgi?id=181121
它可以通过周围的猴子打补丁来的getComputedStyle工作。这是一种非常积极的方法,如果对项目的影响很严重,我只会建议这样做。
这里是一个演示:
http://codepen.io/lampyridae/pen/PwZNdo
的自我修正:
//Monkey-patching getComputedStyle to work around the following
//WebKit Safari bug:
//https://bugs.webkit.org/show_bug.cgi?id=105979
(function() {
//tolerate small variations caused by zoom scaling
var delta = 0.05;
function close_enough(x, y) {
var diff = x - y;
return delta > diff && diff > -delta;
}
//Set up a reference element to measure
//undesired variations from browser zooming
var expected_left = 100;
var body = document.getElementsByTagName("body")[0];
var ref_node = document.createElement("div");
body.appendChild(ref_node);
ref_node.style.position = "relative";
ref_node.style.left = expected_left + "px";
ref_node.style.height = "0";
var native = window.getComputedStyle;
window.getComputedStyle = function(elt) {
//Bug only affects relative positioning.
//Only intervene if the element is concerned.
var styles = native(elt);
if("relative" !== styles.position) {
return styles;
}
//Measure undesired variation from reference element
var ref_styles = native(ref_node);
var ref_left = parseFloat(ref_styles.left);
if(close_enough(expected_left, ref_left)) {
return styles;
}
var proportion = ref_left/expected_left;
//Copy styles
//Use an object implementing the CSSStyleDeclaration interface.
var cloned = document.createElement("div").style;
var attr;
for(var ii=0; ii < styles.length; ++ii){
attr = styles[ii];
cloned[attr] = styles[attr];
}
//correct styles
var property_names = ["top", "right", "bottom", "left"];
for(var ii = 0; ii < property_names.length; ++ii) {
var prop_name = property_names[ii];
if(prop_name in cloned) {
cloned[prop_name] = (parseFloat(cloned[prop_name])/proportion) + "px";
}
}
return cloned;
}
})();