Domrect là gì

Lần cuối cùng bạn phải đảm bảo rằng ứng dụng của mình hoạt động trên các trình duyệt kỳ lạ như Microsoft Edge là khi nào?

Tôi, tôi phải làm điều đó vào đầu tuần này. Kinh nghiệm của tôi về việc xây dựng trang internet cho một đại lý internet hồi trung học có nghĩa là tôi biết mình sẽ tham gia vào lĩnh vực nào.

Microsoft Edge đã không làm bạn thất vọng.

Array.flat[] không hoạt động trên Edge. Trên mọi trình duyệt khác nó làm phẳng các mảng lồng nhau. Trên Edge, nó nổ tung và nói rằng phương pháp này không tồn tại.

CanIuse cho Array.flat

Được rồi không mỗi trình duyệt. Chỉ những cái mà mọi người sử dụng.

Bạn có thể giải quyết điều đó với một polyfill phải không? Một gói npm tự tải lên và làm cho Array.flat hoạt động.

Đúng, làm cho lỗi biến mất. Không hoạt động như cách nó làm trên các trình duyệt khác. ‍️

Vì vậy, tôi đã phải thay thế mọi .flat[] với bản hack của riêng tôi như thế này: .cut back[[arr, vals] => [...arr, ...vals], []]. Thở dài

Trong dự án này, tôi cũng sử dụng chroma-js để điều chỉnh màu sắc. Cách thuận tiện để lấy màu và cung cấp cho nó một kênh alpha nhỏ với chroma[shade].alpha[0.5].

Ngoại trừ trên Edge, điều này đã tạo ra các giá trị hex không hợp lệ. Màu sắc không hoạt động ở tất cả.

Phải hack nó lại với nhau như thế này `rgba[${chroma[shade].alpha[0.5].rgba[].be a part of[',']}]

Bạn nghĩ rằng điều đó là xấu? Nó thậm chí còn tốt hơn!

.getBoundingClientRect[] không hoạt động trên Edge. Vâng, nó có nhưng nó trả về một ClientRect Thay vì một DOMRect. Chúng hoạt động giống nhau trừ khi chúng không hoạt động.

Ví dụ DOMRect có x và y tọa độ. ClientRect chỉ có high và left. Oh và ClientRect chỉ tồn tại trên Edge. Tất nhiên.

Điều này có nghĩa là tôi phải sửa useDimensions thư viện. Dự án dựa vào nó rất nhiều để đo lường nội dung và xây dựng trực quan hóa dữ liệu đáp ứng.

Oh và flexbox không hoạt động chính xác. Thay vì cách đều nhau, nó gom mọi thứ ở bên trái. Tất nhiên.

Bất chấp tất cả những nỗi đau này, vẫn có một lớp lót bạc BrowserStack được thực hiện thử nghiệm trên Microsoft Edge hoàn toàn không gây đau đớn.

Chà bản thân việc kiểm tra đã rất đau đớn và kết quả khiến tôi khóc nhưng Tôi có thể kiểm tra.

Tôi là loại người Mac mà bạn thấy. Tôi không có Edge. Tôi không có máy Home windows. Tôi không quan tâm đến VirtualBox và không quan tâm đến các hình ảnh và cài đặt Home windows trên một phân vùng và bất cứ thứ gì khác mà nó sử dụng để kiểm tra trên các trình duyệt kỳ lạ.

Với BrowserStack, tôi đã có thể chạy Edge trong tab Chrome. Đúng rồi. Tab Chrome mô phỏng toàn bộ hệ điều hành chạy trình duyệt toàn màn hình.

Edge có thể chạy trên máy chủ của họ và truyền hình ảnh vào tab. Tuy nhiên, cảm giác như một phép thuật.

Màn hình mở BrowserStack

BrowserStack thực sự hỗ trợ tất cả các trình duyệt

Tôi nghĩ bạn có thể sử dụng nó miễn phí trong 15 phút. Tôi cần nhiều hơn thế nên tôi đã kiếm được số tiền khổng lồ 19 đô la cho một kế hoạch làm việc tự do. Điều đó đã cho tôi 100 phút.

Bạn thậm chí có thể chạy mọi thứ từ localhost. Không biết làm thế nào họ làm cho nó hoạt động. Thể loại //localhost:3000 vào thanh URL và nó thực sự chuyển đến máy chủ cục bộ của bạn.

Chỉ cần không gõ localhost:3000 bởi vì Edge không biết cách đối phó với điều đó và nói rằng nó không thể truy cập URL. ‍️

Và đây là bằng chứng. Cạnh chạy bên trong Chrome hiển thị trang chủ của tôi.

Kinh ngạc.

Thật could mắn cho chúng tôi là Microsoft sẽ sớm thay thế công cụ trình duyệt Edge bằng Chrome. Có lẽ sau đó chúng ta sẽ không cần cái này nữa

Chúc mừng, ~ Swizec

Chia sẻ

• Đã sao chép