此問題是由被固定在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;
}
})();