Bizarre Microsoft Edge hành vi: input nhập văn bản lĩnh vực được chậm chạp khi nhiều yếu tố nền được trình bày (và nhiều hơn nữa)

Question

Here is a JSFiddle that demonstrates what I describe below

Tôi đã cố gắng để theo dõi xuống một cạnh lạ render vấn đề. Tôi đã không thể tái tạo vấn đề, nhưng tôi đã có thể tái tạo một số hành vi kỳ quặc mà tôi nghĩ là có liên quan trực tiếp. Tôi đã có một mẹo nền mà tôi sử dụng trên một số trang đầy đủ và một số tiêu đề trang liên quan đến việc tạo ra một nhóm các yếu tố ngẫu nhiên <div> với độ mờ rất thấp (nghĩa là, gần như trong suốt) và sau đó chuyển ngẫu nhiên chúng xung quanh. Đó là loại câm nhưng nó đã được làm việc cho tôi mà không có bất kỳ vấn đề trong Firefox và Chrome trong một thời gian. Gần đây tôi đã bắt đầu thử nghiệm ở Edge (thử nghiệm chung; không có gì cụ thể về nền, mà tôi không dành thời gian suy nghĩ về bình thường), và rất sớm nhận thấy rằng, ngẫu nhiên, di chuột qua mọi thứ với sự thay đổi phong cách đơn giản :hover ((#)giống như, màu nền của nút tối màu) sẽ khiến hộp màu xám gần như hiển thị che phủ phần tử. Hộp màu xám sẽ dính xung quanh trong một khoảng thời gian không thể đoán trước, và sau đó biến mất một cách ngẫu nhiên. Đôi khi điều đó xảy ra chỉ trên một vài yếu tố trên trang, và đôi khi không có gì cả.

Điều đó như bạn có thể tưởng tượng đã khiến tôi phát điên, một phần vì tôi không thể tái tạo nó trong một CodePen hoặc JSFiddle. Trong khi cố gắng điều tra, tôi bắt đầu nhận thấy rằng việc nhập vào trường nhập trên một trang bị ảnh hưởng (trang đăng nhập trên thực tế) cực kỳ chậm chạp. Tôi đang sử dụng một VirtualBox VM cho điều này (không phải là một yếu tố, tôi không nghĩ, như một đồng nghiệp với Windows 10 bản địa nhìn thấy chính xác cùng một vấn đề) vì vậy tôi ban đầu nghĩ rằng nó chỉ là độ trễ thông qua đó, nhưng sau một thời gian nó đã trở thành rõ ràng là không.

Trên một trong nhiều lần thử thay đổi ngẫu nhiên một cái gì đó để xem điều gì đang diễn ra, tôi tắt nền ngẫu nhiên <div> và cả vấn đề hộp màu xám và vấn đề đầu vào chậm chạp biến mất.

Fiddle được liên kết ở trên đơn giản hơn một chút so với thiết lập thực, nhưng không nhiều. Nó đơn giản đánh dấu:

<div class=container> 
    <input> 
    <br> 
    <button class=toggle>Toggle Background</button> 
</div> 

và sau đó một số CSS:

body { 
    background-color: blue; 
    text-align: center; 
} 
.container { 
    position: relative; 
    display: inline-block; 
    margin-top: 100px; 
} 
.shape { 
    position: absolute; 
    background-color: white; 
} 
.noshapes .shape { 
    display: none; 
} 

JavaScript để làm cho hình dạng cũng rất đơn giản:

for (var i = 0; i < 2000; ++i) { 
    $("<div/>", { 
     "class": "shape", 
     css: { 
      transform: "translate(" + Math.random() * 1000 + "px, " + Math.random() * 1000 + "px)", 
      opacity: Math.random() * 5/100, 
      height: Math.random() * 200 + "px", 
      width: Math.random() * 200 + "px" 
     } 
    }).prependTo("body"); 
} 

(Trên trang thật của tôi, tôi chỉ làm cho khoảng 100 phần tử ngẫu nhiên.)

Trên Firefox và Chrome, hộp nhập liệu hoàn toàn không bị ảnh hưởng bởi sự hiện diện (hoặc abs ence) của các yếu tố nền. Tuy nhiên, trong Edge, có độ trễ khác biệt khi nhập vào trường nhập khi các phần tử hiển thị. Nó giống như trình kết xuất đang cố gắng thực hiện một số tính toán xung đột khi nó cập nhật màn hình <input> khi giá trị thay đổi.

Tôi ước gì mình có thể tái tạo vấn đề hộp xám thậm chí còn hơn nữa, nhưng tôi đã không thành công. Nó rõ ràng là một lỗi kết xuất, giống như nhiều thứ mà tôi đã thấy trong nhiều năm với IE trước đó, biểu hiện liên quan đến rất nhiều sự ngẫu nhiên, và các sự kiện dường như không quan tâm (như cửa sổ mất tập trung hoặc chuyển động ngẫu nhiên của chuột). Đó là một chút kỳ lạ rằng Edge sẽ bị một vấn đề như vậy, nhưng sau đó có thể không. (Edge có còn có thứ "hasLayout" lạ không?)

Có lẽ tôi sẽ chỉ ngửi cho Edge (điều này thực sự buồn) vì tôi không thể nghĩ ra cách tiếp cận "phát hiện tính năng" nào cho vấn đề.

Có ai khác nhìn thấy điều này không? Tôi đã không tìm thấy đề cập đến nó cho đến nay.

chỉnh sửa Tôi nghĩ rằng tôi thấy vấn đề đầu vào chậm trong IE11, nhưng tôi không thể tạo lại vấn đề hộp màu xám ở đó.

Answer 1

Tôi có thể xác nhận rằng tôi đang thấy cùng một hành vi. Suy nghĩ đầu tiên của tôi là vấn đề xuất phát từ số lượng các yếu tố cắt với các thuộc tính phong cách độc đáo, nhưng tò mò, vấn đề dường như liên quan đến div s chồng chéo với input.

Nếu bạn điều chỉnh mã để các yếu tố đến sau đó, sự cố sẽ biến mất hoàn toàn.

var b = document.body; 
 
for (var i = 0; i < 2000; ++i) { 
 
    var div = document.createElement("div"); 
 
    div.className = "shape"; 
 
    div.style.transform = "translate(" + Math.random() * 1000 + "px, " + Math.random() * 1000 + "px)"; 
 
    div.style.opacity = Math.random() * 5/100; 
 
    div.style.height = Math.random() * 200 + "px"; 
 
    div.style.width = Math.random() * 200 + "px"; 
 
    b.appendChild(div); 
 
} 
 
document.querySelector(".toggle").onclick = function() { 
 
    document.body.className = document.body.className == "noshapes" ? "" : "noshapes"; 
 
}

body { 
 
    background-color: blue; 
 
    text-align: center; 
 
} 
 
.container { 
 
    position: relative; 
 
    display: inline-block; 
 
    margin-top: 100px; 
 
} 
 
.shape { 
 
    position: absolute; 
 
    background-color: white; 
 
} 
 
.noshapes .shape { 
 
    display: none; 
 
}

<div class=container> 
 
    <input> 
 
    <br> 
 
    <button class=toggle>Toggle Background</button> 
 
</div>

Tôi tin rằng để tránh những vấn đề nhưng giữ lại các thiết kế trực quan, bạn có thể thay đổi logic của bạn để xác định dịch và chiều cao/pixel chiều rộng để ngăn chặn các yếu tố từ giao nhau với bạn thùng đựng hàng.