Không thể di chuyển bên trong div sau khi áp dụng -webkit-transform trong Safari

Question

Tôi đang tạo một menu trang trình bày.

Trình đơn dài và tôi cần để có thể cuộn bên trong nó, vì vậy tôi đã đặt tràn-y: cuộn trên đó.

Tôi đang sử dụng -webkit-transform (và các biến thể trên các trình duyệt khác) làm thuộc tính chuyển đổi.

Bây giờ tôi không thể cuộn bên trong div, bằng cách sử dụng con lăn khi ở trên cùng của div sẽ làm cho toàn bộ trang cuộn.

Nếu tôi thay đổi hành vi của menu và chuyển đổi thuộc tính phù hợp (thiết lập menu sang phải: -320px và làm động nó trở lại phải: 0), cuộn hoạt động.

Lỗi này chỉ xảy ra trong Safari, nó hoạt động tốt trong Chrome và các trình duyệt khác. Cũng hoạt động trên iOS.

Mọi người đều biết cách giải quyết? Có ai gặp phải vấn đề này trước đây không? Tôi dường như không thể tìm thấy bất kỳ thông tin nào về nó. Cảm ơn bạn.

Answer 1

Tôi gặp vấn đề tương tự với sự khác biệt mà tôi sử dụng một số animation thay vì transition và overflow: auto thay vì overflow: scroll.

này khắc phục sự cố cho tôi (el là phần tử DOM mà hoạt hình được áp dụng):

function fixSafariScrolling(event) { 
    event.target.style.overflowY = 'hidden'; 
    setTimeout(function() { event.target.style.overflowY = 'auto'; }); 
} 

el.addEventListener('webkitAnimationEnd', fixSafariScrolling);