2014-10-08 98 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

在此期間,我恐怕只有一件事你可以做:刷新頁面後,縮放將修復元素的位置。