सफारी सीएसएस चौड़ाई संक्रमण विभिन्न इकाई मापों के साथ काम नहीं कर रहा है

Question

मुझे सफारी में -webkit-transition के साथ कोई समस्या है। ये संक्रमण क्रोम, एफएफ, और आईई 10 (गैर-प्रीफिक्स्ड संक्रमण संपत्ति का उपयोग करके) में ठीक काम करते हैं।

मेरी साइट में, 3 पैनल हैं जिन्हें देखा जा सकता है। मुख्य रूप से डिफ़ॉल्ट रूप से खुलता है और दूसरी 2 खिड़की के दाईं ओर ध्वस्त हो जाती है जो उनकी सामग्री का एक स्लीवर दिखाती है। जब एक ध्वस्त पैनल पर क्लिक किया जाता है तो जेएस के माध्यम से इसमें अतिरिक्त कक्षा को जोड़ा जाता है और यह संक्रमण 100% चौड़ाई तक होता है।

सीएसएस:

.panel-1{ 
    width: 100%; 
} 

.panel-2{ 
    width: 8rem; 
    position: absolute; 
    top: 0; 
    right: 0; 
    overflow: hidden; 
    z-index: 500; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 

.panel-2:hover{ 
    width: 10rem; 
} 

.panel-2.panel-open{ 
    width: 100%; 
} 

.panel-3{ 
    width: 4rem; 
    position: absolute; 
    top: 0; 
    right: 0; 
    overflow: hidden; 
    z-index: 501; 
    transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
} 

.panel-3:hover{ 
    width: 6rem; 
} 

.panel-3.panel-open{ 
    width: 100%; 
} 

समस्या माप इकाइयों के अंतर के साथ हो रहा है। होवर संक्रमण इरादे के रूप में काम करते हैं (rem से rem), हालांकि "पैनल-ओपन" पर चौड़ाई संक्रमण (rem से %) संक्रमण को छोड़ देता है और बस खुला रहता है। यदि मैं rem की बजाय डिफ़ॉल्ट चौड़ाई को प्रतिशत पर स्विच करता हूं, तो संक्रमण फिर से काम करता है। मैं ऐसा नहीं कर सकता क्योंकि यह एक तरल पदार्थ साइट है और पैनल ढह गई चौड़ाई स्थिर और सापेक्ष नहीं होने की आवश्यकता है।

मैंने % में min-width जोड़ने का प्रयास किया है, लेकिन इससे मदद नहीं मिली है। इस पर कोई सलाह बहुत सराहना की जाएगी।

Answer 1

width पर संक्रमण एक समस्या है। max-width आज़माएं।

Answer 2

width को संक्रमण करना मेरे अनुभव में समस्याग्रस्त है। आप इसे चौड़ाई का उपयोग करने के बजाय left और right मानों का उपयोग करने के लिए परिवर्तित कर सकते हैं। width: 20%;left: 80%; right: 0; जैसा ही होगा, और width: 50%;left: 25%; right: 25%; होगा। यहाँ एक codepen है https://codepen.io/anon/pen/JWaJzN

document.getElementById("wrapper").addEventListener("click", function(){ 
 
    if (this.classList.contains('center')) { 
 
    this.classList.remove('center'); 
 
    } 
 
    else { 
 
    this.classList.add('center'); 
 
    } 
 
});

.container { 
 
    width: 550px; 
 
    height: 250px; 
 
    position: relative; 
 
    background-color: teal; 
 
} 
 

 
#wrapper { 
 
    height: 20%; 
 
    top: 0; 
 
    right: 0; 
 
    left: 80%; 
 
    position: absolute; 
 
    transform-origin: top left; 
 
    transition: all 1s ease; 
 
} 
 

 
#wrapper.center { 
 
    top: 50%; 
 
    left: 25%; 
 
    right: 25%; 
 
    transform: translateY(-50%); 
 
} 
 

 
#card { 
 
    width: 100%; 
 
    height: 100%; 
 
    position: relative; 
 
    transition: all 1s ease; 
 
} 
 

 

 
h3 { 
 
    margin: 0; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 100%; 
 
    background: red; 
 
}

<section class="container"> 
 
    
 
    <div id="wrapper"> 
 
    <div id="card"> 
 
     <h3>click here</h3> 
 
    </div> 
 
    </div> 
 
    
 
</section>