Chuyển đổi chiều rộng css Safari không hoạt động với các phép đo đơn vị khác nhau

Question

Tôi đang gặp sự cố với -webkit-transition trong Safari. Các chuyển tiếp này hoạt động tốt trong Chrome, FF và IE10 (sử dụng thuộc tính chuyển tiếp không có tiền tố).

Trong trang web của tôi, có 3 bảng có thể xem được. Cái chính mở theo mặc định và 2 cái khác được thu gọn ở bên phải của cửa sổ hiển thị một mảnh nội dung của chúng. Khi một bảng được thu gọn được bấm, một lớp bổ sung sẽ được thêm vào nó thông qua JS và nó chuyển tiếp thành 100% chiều rộng.

CSS:

.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%; 
} 

Vấn đề có vẻ là với sự khác biệt của các đơn vị đo lường. Chuyển tiếp di chuột hoạt động như dự định (rem đến rem), tuy nhiên việc chuyển đổi chiều rộng (rem thành %) trên "bảng điều khiển mở" sẽ bỏ qua quá trình chuyển đổi và chỉ mở nhanh. Nếu tôi chuyển chiều rộng mặc định thành phần trăm thay vì rem thì quá trình chuyển đổi sẽ hoạt động trở lại. Tôi không thể làm điều này tuy nhiên vì nó là một trang web chất lỏng và bảng điều khiển chiều rộng sụp đổ cần phải được tĩnh và không tương đối.

Tôi đã cố gắng thêm min-width vào %, nhưng điều đó không có tác dụng. Bất kỳ lời khuyên nào về điều này sẽ được đánh giá cao.

Answer 1

Chuyển tiếp trên width là một vấn đề. Hãy thử max-width.

Answer 2

Chuyển đổi width có vấn đề trong trải nghiệm của tôi. Bạn có thể chuyển đổi điều này để sử dụng các giá trị left và right thay vì sử dụng chiều rộng. width: 20%; sẽ giống như left: 80%; right: 0; và width: 50%; sẽ là left: 25%; right: 25%;. Dưới đây là một 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>