Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Visual Glitch on Mobile Nav Menu on Firefox browser #2379

Open
AC40 opened this issue Jan 13, 2025 · 0 comments
Open

Visual Glitch on Mobile Nav Menu on Firefox browser #2379

AC40 opened this issue Jan 13, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@AC40
Copy link

AC40 commented Jan 13, 2025

Scale Version
3.0.0-beta.154

Framework and version
Plain HTML and Scale Components

Current Behavior
The chevrons which indicate the option to drill down or up in the mobile nav menu are out of place by default. They sometimes, inconsistently reset. A way to force them into their place is, weirdly, hovering (not clicking or interacting, just hovering) over them with the element selector. This makes them snap into place. But, whenever the menu is opened again, they are out of place.
A screen recording from the Firefox browser (the only browser I could find, where the issue occurs):
https://github.com/user-attachments/assets/6b6131fb-d36b-436e-9fa2-0cb46e75914f

Expected Behavior
As in other browsers, the chevrons should be in place always not not glitch around.
A screen recording from the Chrome browser (works in Edge as well):
https://github.com/user-attachments/assets/e4befd1e-fe99-4f45-b010-828ca7fc0cbb

Code Reproduction
Any of the official scale examples with multiple levels work (e.g.: examples/telekom-header-samples/mega-menu

<scale-telekom-header>
    <scale-telekom-nav-list variant="functions" slot="functions" alignment="right">
      <scale-telekom-nav-item class="burger-item">
        <button>
          <scale-badge>
            <scale-icon-action-menu></scale-icon-action-menu>
          </scale-badge>
        </button>
        <scale-telekom-nav-flyout class="mobile-nav-flyout">
          <!-- the mobile navigation structure goes here -->
          <scale-telekom-mobile-flyout-canvas app-name="Standard Version" app-name-link="/foo">

            <scale-telekom-mobile-menu slot="mobile-main-nav" app-name-link="/bar">
                <scale-telekom-mobile-menu-item active>
                  <a href="#">Topic One</a>
                  <scale-telekom-mobile-menu-item active slot="children">
                    <a href="#">Second Level</a>
                    <scale-telekom-mobile-menu-item slot="children">
                      <a href="#">Third Level</a>
                    </scale-telekom-mobile-menu-item>
                  </scale-telekom-mobile-menu-item>
                </scale-telekom-mobile-menu-item>
              </scale-telekom-mobile-menu>
          </scale-telekom-mobile-flyout-canvas>
        </scale-telekom-nav-flyout>
      </scale-telekom-nav-item>
    </scale-telekom-nav-list>
    <!-- main navigation (desktop) -->
    <scale-telekom-nav-list variant="main-nav" slot="main-nav">
      <scale-telekom-nav-item active>
        <a href="#">Topic One</a>
      </scale-telekom-nav-item>
      </scale-telekom-nav-item>
    </scale-telekom-nav-list>
  </scale-telekom-header>

Desktop (please complete the following information):

  • OS: Windows
  • Browser: Firefox
  • Version: 133
@AC40 AC40 added the bug Something isn't working label Jan 13, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

1 participant