NHANWEB

Khắc phục lỗi vỡ layout trên Chrome mới

Hơn 10 ngày trước(ngày 20/11) hàng loạt website tiếng Việt gặp sự cố vỡ layout (bố cục trang) do Chrome bất ngờ nâng cấp. Đây là sự cố ngoài ý muốn của các webmaster khiến cho rất nhiều người lao đao vì lo lăng cho người dùng không thể truy cập được website.

Nói thật, NhanWeb cũng gặp tình trạng tương tự nhưng nhẹ hơn nên mình cũng chưa vội vã thực hiện công việc sửa lỗi mà chủ yếu dành tìm hiểu nguyên nhân tại sao lại có sự cố lớn xảy ra như vậy mà Chrome vẫn im hơi lặng tiếng bỏ mặt cộng đồng website Việt Nam nhiều người điêu đứng. Nguyên nhân cơ bản là do Chrome đã kích hoạt một số tính năng thử nghiệm trong phiên bản Chrome mới khiến cho việc hiển thị gặp một số trục trặc.

NhanWeb và một số website bị lỗi giao diện trên phiên bản Chrome mới.

Nếu bạn để ý, FaceBook cũng gặp một số vấn đề tương tự.

Hướng dẫn khắc phục

Việc khắc phục bạn có thể thực hiện từ 2 phía tùy thuộc vào việc bạn là người dùng hay là người quản trị website.

1. Nếu bạn là người dùng

Trong lúc chờ đợi FaceBook hoặc chủ nhân website bạn thường xuyên truy cập fix lỗi bạn có thể tự sửa lỗi cho trình duyệt Chrome của mình bằng cách tắc đi những tính năng thử nghiệm của Chrome khiến cho việc render website gặp vấn đề. Việc thực hiện khá đơn giản:

Trên trình duyệt bạn gõ:

chrome://flags

Sau đó bạn tìm đếm Tắt DirectWrite như hình dưới đây:

Tắt DirectWrite

Việc tiếp theo là bạn Bật nó lên như hình.

Bật DirectWrite lên như hình

Vậy là xong, bạn cần restart lại Chrome của mình bằng cách tắt các trình duyệt đi rồi mở lên lại và tận hưởng.

2. Đối với quản trị website

Bạn có thể cấu hình lại tính năng DirectWrite để sử dụng, tuy nhiên nếu người dùng của bạn không thể thực hiện được điều đó thì sao ? Tôi sẽ hướng dẫn cho bạn một cách sửa lỗi nhanh chóng mà tôi đang ứng dụng rất thành công như sau.

Đối với những khối (block) hoặc lớp(class) hay định danh (ID) bị lỗi vỡ layout dạng này, bạn chỉ cần bổ sung thêm một đoạn StyleSheet nho nhỏ dưới đây và file CSS của nó:

[code language=”css”] .class, #ID, div{
white-space: nowrap;
}
[/code]

Việc của bạn bây giờ là tìm kiếm lại trên trang web những vị trí nào bị vỡ layout để bổ sung vào.

Tôi cũng khuyên các quản trị viên nên thực hiện việc này sớm để không gây ảnh hưởng đến người dùng của bạn bởi vì cách tự chỉnh sửa trên trình duyệt của mình mà tôi đã nói ở trên có thể không phổ biến đến tất cả mọi người được và không phải ai cũng có thể thực hiện được. Bởi vì vậy, đứng ở vai trò là người chủ website bạn nên chủ động khắc phục việc này.

Nếu bạn gặp khó khăn, hãy comment ở topic này tôi sẽ hướng dẫn bạn thêm.

Exit mobile version