Làm cách nào để gỡ lỗi các điểm ngắt phản hồi không mong muốn?

Question

Tôi hiện đang sử dụng Bootstrap 4 alpha 4.

Tôi đã mua một trang web mà tôi đã bắt đầu nghiên cứu và sửa đổi. Tôi đang gặp một vấn đề đặc biệt kỳ lạ mà tôi cho là phải liên quan đến các truy vấn phương tiện bằng cách nào đó. Các nhà phát triển ban đầu đã từ chối khắc phục vấn đề.

Khi tôi truy cập trang web và thay đổi kích thước chiều rộng cửa sổ thành bất kỳ nơi nào giữa các trang 992px và 1008px (cả hai phần.) Biến mất vì điểm ngắt phản hồi này không được xác định trong các lớp Bootstrap được thiết lập. Tôi đã thử nghiệm điều này với các trình duyệt Chrome và FF mới nhất.

Có ai có manh mối về cách tôi có thể gỡ lỗi điều này không?

Tôi đã cố gắng tìm kiếm các giá trị 992 và 1008 cũng như +/- 1 trong các tập tin CSS nhưng giá trị 1008 không tìm thấy bất cứ nơi nào (trong toàn bộ dự án!) Và giá trị 992 đang được sử dụng bình thường trong stylesheet AFAIK.

Bạn có thể thấy sự cố này live here. Khi bạn thay đổi kích thước chiều rộng của trình duyệt trong khoảng từ 992px đến 1008px, logo sẽ biến mất.

Answer 1

Vấn đề là thanh cuộn.

1008px-992px=16px //the scrollbar dimension 

Trong thực tế, nếu bạn thêm overflow: hidden thuộc tính vào thẻ HTML, mọi thứ sẽ hoạt động chính xác.

Truy vấn phương tiện và javascript của bạn không tính cùng chiều rộng (một và thẻ còn lại không có thanh cuộn).

Here a JSFiddle example sự cố.

Gỡ rối các trang web, JS (minified) và chức năng (một phần của nó) là:

/prestashop/PRS01/PRS0100014/themes/cenzo/assets/js/theme.js

//.........FOLLOW THIS LINE............................................................................_____HERE______ 
u.default.responsive = u.default.responsive || {}, u.default.responsive.current_width = (0, s.default)(window).width(), u.default.responsive.min_width = 992, u.default.responsive.mobile = u.default.responsive.current_width < u.default.responsive.min_width, (0, s.default)(window).on("resize", function() { 
    var e = u.default.responsive.current_width, 
     t = u.default.responsive.min_width, 
     n = (0, s.default)(window).width(), 
     i = e >= t && n < t || e < t && n >= t; 
    u.default.responsive.current_width = n, u.default.responsive.mobile = u.default.responsive.current_width < u.default.responsive.min_width, i && o() 
}), (0, s.default)(document).ready(function() { 
    u.default.responsive.mobile && o() 
}) 

Khi viewport là 1007 trong u.default.responsive.current_width bạn có thể thấy 991

u.default.responsive.min_width là 992

Điều kiện u.default.responsive.current_width < u.default.responsive.min_width là đúng và chức năng remove node được kích hoạt.

Để gỡ lỗi này, trên tab "Phần tử" chrome tìm ID phần tử top-menu và đặt break on... node removal, kiểm tra ngăn xếp bạn có thể tìm thấy hàm ở trên và tất cả các giá trị. Plugin "Window Resizer" cho chrome giúp bạn kiểm tra kích thước Viewport và Window với nhau.

---

Giải pháp trong trường hợp của bạn hơi phức tạp vì CMS và/hoặc Khung phức tạp. Bạn có thể thay thế (window).width() bằng window.innerWidth có thể bạn giải quyết nó, nhưng tôi không thể biết điều gì sẽ xảy ra với phần còn lại của chủ đề.

Nhưng bạn có thể tìm thấy một số giải pháp ở đây trên stackoverflow:

CSS Media Queries and Firefox's Scrollbar Width

hay đây

$(window).width() not the same as media query

Hope điều này giúp bạn :)

Answer 2

Dường như container, trong đó logo nằm có một max-width với một số tiền NHỎ HƠN hơn chiều rộng tối thiểu cần thiết cho nó để hoạt động.

thử thay đổi này (theme.css, dòng 703-719):

@media (min-width: 768px) { 
    .container { 
     max-width: 720px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
     max-width: 940px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
     max-width: 1024px;  
     padding-left:0; 
     padding-right:0;   
    } 
} 

này:

@media (min-width: 768px) { 
    .container { 
     max-width: 768px; 
    } 
} 
@media (min-width: 992px) { 
    .container { 
     max-width: 992px; 
    } 
} 
@media (min-width: 1200px) { 
    .container { 
     max-width: 1200px;  
     padding-left:0; 
     padding-right:0;   
    } 
} 

Sau đó, logo luôn là nhìn thấy được.