2014-10-08 65 views
0

当施加一些浏览器缩放我已经遇到了一些问题与在Safari 非常基本的jQueryUI的特点:jQuery UI的问题

版本:

  • 的jQuery:1.11.1
  • Safari浏览器:7.1

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

回答

0

此问题是由被固定在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; 
    } 
})(); 
0

A similar bug were reported 4 years ago,并通过移动Safari浏览器5

不幸的是,放大基于WebKit浏览器关闭,因为它已经解决了,因为它的实现方式的一些问题,这变焦时反映了可能的定位误差。有一个建议,以更一致的方式统一这一点,但没有估计什么时候可以实施:http://trac.webkit.org/wiki/ScalesAndZooms

在此期间,我恐怕只有一件事你可以做:刷新页面后,缩放将修复元素的位置。