Question

我在Safari中遇到了很多基本jQueryUI功能的问题当应用某些浏览器缩放时：

当启动第二次拖动时，可拖动元素会跳转。 Observed on the official demo
带有还原选项的可拖动选项会在启动还原时跳转。 Observed on the official demo
拖动元素后，具有“捕捉到元素”选项的可拖动元素会错误地按位置捕捉。 Observed on the official demo。

版本：

jQuery：1.11.1
Safari：7.1

jQueryUI对Chrome，Firefox和Internet Explorer 11浏览器缩放做出了很好的反应。我怎样才能让jQueryUI对Safari的浏览器缩放做出正确的反应？

Answer 1

A similar bug were reported 4 years ago因为移动到Safari 5已解决，因此已关闭。

不幸的是，放大基于webkit的浏览器由于其实现方式存在一些问题，这反映了缩放时可能存在的定位错误。有人建议以更一致的方式统一这一点，但无法估算何时可以实施：http://trac.webkit.org/wiki/ScalesAndZooms

与此同时，我担心你只能做一件事：在缩放后刷新页面将修复元素的位置。

Answer 2

此问题是由在Chrome中修复的WebKit中的错误引起的，但在Safari中没有：

https://bugs.webkit.org/show_bug.cgi?id=105979

描述：getComputedStyle（）返回属性的缩放值，例如left，right，top和bottom（当元素的'position'为'relative'时）。这使得无法依赖这些价值观。

以下是错误报告中提供的测试用例：

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;
   }
})();

放大时Safari中的jQuery UI问题

2 个答案: