# 🐛 BÁO CÁO LỖI CROSS-BROWSER (CROSS-BROWSER BUG REPORT) > **📌 ĐÂY LÀ TEMPLATE MẪU — Vui lòng sao chép và điền thông tin thực tế vào các trường bên dưới** --- ## TEMPLATE TRỐNG --- ### 🏷️ TIÊU ĐỀ BUG ``` [Tên trình duyệt] - [Mô tả ngắn gọn vấn đề] - [Tên trang/tính năng] ``` > _Ví dụ: Safari 17 - Button đăng nhập bị lệch sang phải - Trang Login_ --- ### 🚨 MỨC ĐỘ NGHIÊM TRỌNG (SEVERITY) - [ ] 🔴 **Critical** — Chặn hoàn toàn chức năng, không có workaround - [ ] 🟠 **High** — Ảnh hưởng nghiêm trọng đến trải nghiệm, khó dùng - [ ] 🟡 **Medium** — Ảnh hưởng một phần, vẫn dùng được nhưng không đúng - [ ] 🟢 **Low** — Lỗi giao diện nhỏ, không ảnh hưởng chức năng --- ### 🌐 TRÌNH DUYỆT BỊ LỖI | Thông tin | Chi tiết | |---|---| | **Tên trình duyệt** | _(Chrome / Firefox / Safari / Edge / Opera / ...)_ | | **Phiên bản** | _(Ví dụ: 117.0.5938.132)_ | | **Hệ điều hành** | _(Ví dụ: macOS Ventura 13.5 / Windows 11 / iOS 16.4)_ | | **Loại thiết bị** | _(Desktop / Mobile / Tablet)_ | --- ### ✅ TRÌNH DUYỆT HOẠT ĐỘNG ĐÚNG | Tên trình duyệt | Phiên bản | Hệ điều hành | |---|---|---| | _(Ví dụ: Chrome)_ | _(Ví dụ: 117.0)_ | _(Ví dụ: Windows 11)_ | | | | | --- ### 📐 KÍCH THƯỚC MÀN HÌNH | Thông tin | Chi tiết | |---|---| | **Độ phân giải** | _(Ví dụ: 1920×1080 / 390×844)_ | | **Viewport** | _(Ví dụ: 1440px / 375px — đo bằng DevTools nếu có)_ | | **Tỷ lệ thu phóng (Zoom)** | _(Ví dụ: 100% / 125%)_ | --- ### 🔗 URL TRANG BỊ LỖI ``` https:// ``` > _Nếu cần đăng nhập để truy cập, ghi chú thêm tài khoản test bên dưới_ --- ### 🔁 BƯỚC TÁI HIỆN (STEPS TO REPRODUCE) 1. Bước 1: 2. Bước 2: 3. Bước 3: 4. Bước 4: 5. _(Thêm bước nếu cần)_ --- ### ❌ KẾT QUẢ THỰC TẾ (ACTUAL RESULT) > _Mô tả chính xác điều gì đang xảy ra sai. Càng cụ thể càng tốt._ ``` [Mô tả ở đây] ``` --- ### ✔️ KẾT QUẢ MONG ĐỢI (EXPECTED RESULT) > _Mô tả hành vi đúng mà hệ thống nên thực hiện._ ``` [Mô tả ở đây] ``` --- ### 📎 SCREENSHOT / VIDEO > _Đính kèm file ảnh hoặc link video minh họa lỗi_ | Loại tệp | Mô tả | Đính kèm | |---|---|---| | Screenshot | _(Mô tả ảnh chụp)_ | _(Kéo thả file hoặc dán link)_ | | Video | _(Mô tả video)_ | _(Link Google Drive / Loom / ...)_ | | Console Log | _(Log lỗi từ DevTools nếu có)_ | _(Paste text hoặc đính kèm file)_ | --- ### 📝 GHI CHÚ THÊM > _Bất kỳ thông tin bổ sung nào có thể giúp developer tái hiện hoặc hiểu rõ lỗi hơn:_ > - Tần suất xuất hiện lỗi (luôn luôn / thỉnh thoảng / chỉ một lần)? > - Workaround tạm thời (nếu có)? > - Lỗi có liên quan đến ticket nào khác không? ``` [Ghi chú ở đây] ``` --- --- ## 📋 VÍ DỤ MẪU ĐÃ ĐIỀN SẴN > **📌 ĐÂY LÀ VÍ DỤ MINH HỌA — Dữ liệu bên dưới là giả định để tham khảo cách điền** --- ### 🏷️ TIÊU ĐỀ BUG ``` Safari 17 - Button "Thêm vào giỏ hàng" bị lệch sang phải và vỡ layout - Trang Chi tiết Sản phẩm ``` --- ### 🚨 MỨC ĐỘ NGHIÊM TRỌNG (SEVERITY) - [ ] 🔴 Critical - [x] 🟠 **High** ← _Button vẫn nhấn được nhưng layout vỡ nghiêm trọng, ảnh hưởng trực tiếp đến hành vi mua hàng_ - [ ] 🟡 Medium - [ ] 🟢 Low --- ### 🌐 TRÌNH DUYỆT BỊ LỖI | Thông tin | Chi tiết | |---|---| | **Tên trình duyệt** | Safari | | **Phiên bản** | 17.0 | | **Hệ điều hành** | macOS Sonoma 14.0 | | **Loại thiết bị** | Desktop (MacBook Pro 14 inch) | --- ### ✅ TRÌNH DUYỆT HOẠT ĐỘNG ĐÚNG | Tên trình duyệt | Phiên bản | Hệ điều hành | |---|---|---| | Chrome | 117.0.5938.132 | macOS Sonoma 14.0 | | Firefox | 118.0 | macOS Sonoma 14.0 | | Edge | 117.0.2045.60 | Windows 11 22H2 | --- ### 📐 KÍCH THƯỚC MÀN HÌNH | Thông tin | Chi tiết | |---|---| | **Độ phân giải** | 2560×1600 (Retina) | | **Viewport** | 1440px (kiểm tra qua DevTools Safari) | | **Tỷ lệ thu phóng (Zoom)** | 100% | --- ### 🔗 URL TRANG BỊ LỖI ``` https://shop.example.vn/san-pham/ao-thun-basic-trang-001 ``` > _Truy cập trang này không cần đăng nhập. Lỗi xuất hiện ở cả trạng thái guest và logged-in._ --- ### 🔁 BƯỚC TÁI HIỆN (STEPS TO REPRODUCE) 1. Mở trình duyệt **Safari 17.0** trên **macOS Sonoma 14.0** 2. Truy cập URL: `https://shop.example.vn/san-pham/ao-thun-basic-trang-001` 3. Đợi trang tải hoàn toàn (khoảng 2–3 giây) 4. Cuộn xuống đến khu vực chọn size và màu sắc sản phẩm 5. Quan sát vị trí của button **"Thêm vào giỏ hàng"** (màu xanh lá, nằm dưới bộ chọn size) 6. _(Không cần thực hiện thêm hành động nào — lỗi hiển thị ngay khi trang load xong)_ --- ### ❌ KẾT QUẢ THỰC TẾ (ACTUAL RESULT) ``` Button "Thêm vào giỏ hàng" bị đẩy lệch hoàn toàn sang lề phải của container, tràn ra ngoài vùng hiển thị chuẩn. Cụ thể: - Button bị dịch sang phải khoảng 180px so với vị trí thiết kế - Phần text bên trong button bị cắt mất chữ "hàng", chỉ còn hiển thị "Thêm vào giỏ" - Khoảng trắng bất thường (gap ~180px) xuất hiện ở bên trái button - Các element xung quanh (bộ chọn size, thông tin giá) vẫn hiển thị đúng vị trí - Lỗi chỉ xuất hiện trên Safari; các trình duyệt khác hiển thị đúng 100% ``` --- ### ✔️ KẾT QUẢ MONG ĐỢI (EXPECTED RESULT) ``` Button "Thêm vào giỏ hàng" phải hiển thị: - Căn giữa theo chiều ngang trong container sản phẩm (width: 100% của wrapper) - Nằm ngay phía dưới bộ chọn size, cách 16px (theo thiết kế Figma) - Text hiển thị đầy đủ: "Thêm vào giỏ hàng" - Không có khoảng trắng bất thường ở hai bên button - Giống hệt giao diện trên Chrome / Firefox / Edge ``` --- ### 📎 SCREENSHOT / VIDEO | Loại tệp | Mô tả | Đính kèm | |---|---|---| | Screenshot 1 | Toàn bộ trang sản phẩm trên Safari — thấy rõ button bị lệch | `safari-bug-product-page-full.png` | | Screenshot 2 | Zoom vào khu vực button bị lỗi trên Safari | `safari-bug-button-closeup.png` | | Screenshot 3 | Trang tương tự trên Chrome để so sánh (expected) | `chrome-correct-button-layout.png` | | Video | Screen recording 30 giây — tải trang và pan xuống vùng lỗi | `https://drive.google.com/file/d/example-link` | | Console Log | Không có lỗi JavaScript liên quan trong DevTools Safari | _(Không có log lỗi — lỗi thuần CSS)_ | --- ### 📝 GHI CHÚ THÊM ``` 1. TẦN SUẤT: Lỗi xuất hiện 100% các lần tải trang trên Safari 17 — có thể tái hiện ổn định. 2. NGUYÊN NHÂN GỢI Ý (để developer tham khảo): - Nghi ngờ Safari không hỗ trợ đúng thuộc tính CSS "gap" trong Flexbox hoặc có vấn đề với "align-items: flex-end" combined với "width: fit-content" - Class CSS liên quan: `.product-action-wrapper > .btn-add-to-cart` (inspect qua DevTools Safari cho thấy margin-left tự động bị tính sai) 3. WORKAROUND TẠM THỜI: - Người dùng có thể dùng Chrome/Firefox thay thế để mua hàng bình thường. - Chưa có cách fix phía client (không phải lỗi cache hay cookie). 4. LIÊN QUAN ĐẾN TICKET: - Có thể liên quan đến ticket #BUG-204 (Safari flexbox issue trên trang Checkout) — cùng pattern CSS, đề nghị xem xét fix đồng thời. 5. THÔNG TIN THÊM: - Đã test thêm trên Safari 16.6 (macOS Ventura) → KHÔNG bị lỗi - Lỗi chỉ xuất hiện từ Safari 17.0 trở lên → có thể do thay đổi rendering engine - Đã clear cache và hard reload (Cmd+Shift+R) trước khi test → lỗi vẫn còn ``` --- > **✍️ Người báo cáo:** Nguyễn Văn A — QA Engineer > **📅 Ngày phát hiện:** 15/10/2024 > **🔖 Trạng thái:** Open — Chưa assign