search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
746 stars 66 forks source link

creative-daffodil-2c8447.netlify.app - Resizing the windows to less than 800px displays a missing burger menu line #111165

Open The-Coders-Club-OC opened 2 years ago

The-Coders-Club-OC commented 2 years ago

URL: https://creative-daffodil-2c8447.netlify.app/

Browser / Version: Firefox 105.0 Operating System: Windows 10 Tested Another Browser: Yes Chrome

Problem type: Something else Description: Webpage CSS rendering issue Steps to Reproduce: My website is on mobile view (less than an 800-pixel window) on Firefox 105.0. I have a mobile hamburger-style menu with three lines. The middle line is not displaying. It displays on Chrome 105.0.0 but not Firefox.

Browser Configuration
  • None

From webcompat.com with ❤️

softvision-raul-bucata commented 2 years ago

We appreciate your report. Based on what you described, the issue can be reproduced on other browsers and it is not a Compatibility issue. On desktop devices, the hamburger menu is not displayed at all, when in full sized window.

This is the result using Firefox : Screenshot_2

And this is the result using Chrome: Screenshot_3

Resizing the window to less than 800px displays the issue.

This is the result using Firefox : Screenshot_8

And this is the result using Chrome:

Screenshot_6

On mobile devices, the hamburger menu presents faded lines.

This is the result using Firefox : Screenshot_4

And this is the result using Chrome: Screenshot_5

Based on the above findings, and the fact that the issue reproduces on desktop when resizing the window, I will move this issue.

Tested with:

Browser / Version: Firefox Release 104.2.0 (2015902899-🦎104.0.2-20220902153754🦎 )/ Firefox Nightly 107.0a1 (2015905419-🦎107.0a1-20220921095211🦎) Chrome Mobile Version 105.0.5195.124 Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density) Operating System: Google Pixel 3 (Android 12) -1080 x 2160 pixels, 18:9 ratio (~443 ppi density)

Tested with:

Browser / Version: Firefox Release 105.0 (64-bit)/ Firefox Nightly 107.0a1 (2022-09-21) (64-bit) /Chrome Version Version 105.0.5195.127 (Official Build) (64-bit) Operating System: Windows 10 PRO x64

Notes:

  1. Reproducible regardless of the status of ETP.
  2. Reproducible on the latest build of Firefox Nightly and Release.
  3. Works as expected using Chrome.

Moving this to NeedsDiagnosis for further investigations.

[qa_38/2022]

The-Coders-Club-OC commented 2 years ago

The missing line still seems to appear in the debug console on Firefox.