Tabs may not display correctly in seven theme if browser zoom is set

Created on 27 May 2020, almost 5 years ago
Updated 6 March 2024, about 1 year ago

Update: Per several comments this is occurring when the browser zoom function is in use. Display works as expected when browser zoom is set to 100%.

Original issue:

Recently upgraded to Chrome V83 and the tabs are breaking when I use Seven as admin theme
Chrome

Vs Safari

It seems that this class is-horizontal is being removed from the nav tag
Relevant twig is core/themes/seven/templates/menu-local-tasks.html.twig

I tried the patch in https://www.drupal.org/project/drupal/issues/3138421#comment-13647224 β†’ hoping that it will work, but it did not.

πŸ› Bug report
Status

Needs review

Version

1.0

Component

Seven theme

Created by

πŸ‡¦πŸ‡ΊAustralia gargsuchi Melbourne

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • last update over 1 year ago
    Custom Commands Failed
  • πŸ‡§πŸ‡ͺBelgium weseze

    I don't agree with the "works as designed" here. Users can zoom in the browser and telling them they can not is not a solution...

    Some background info on this issue (non Drupal):
    https://stackoverflow.com/questions/31077604/browser-zoom-in-changes-my-...
    https://stackoverflow.com/questions/7835287/zoom-changes-the-design-layout

    My frontend skills are not that good, but as I understand it the issue is caused by rounding errors in the browser when zooming.
    This can be properly fixed in 2 ways:

    1/
    Figure out which CSS causes rounding errors and apply box-sizing correctly. This seems a bit difficult for me and might also slightly change appearance of tabs. (talking tenths of pixels here) Depending on what elements need box-sizing it might also affect other elements in the admin theme. So I'd prefer not to go down this possible rabbit hole...

    2/
    When calculating the height of tabs vs tab items in the JS (to determin if they should be shown horizontal/vertical), just round the pixel values down to avoid small differences causing wrong behaviour.
    As far as I can tell the calculation is meant to detect a difference between "a height" an "no height", not a difference in 0.01 pixel caused by rounding errors in browsers when zooming.
    See attached patch that fixes this issue. (Drupal 9)

  • πŸ‡ΊπŸ‡ΈUnited States smustgrave

    Since seven has been removed from core moving to contrib

  • πŸ‡§πŸ‡ͺBelgium weseze

    Update patch so it applies to seven as D10 contrib theme rather D9 core theme.

  • Hi,
    Verified this issue on Drupal 10.0.0. Unable to reproduce on this version.

    However, also verified on Drupal 10.2.0 version - Issue can be reproduced here. But unable to apply a patch 3143105.28.patch as it's failing.

    Attaching screenshot for reference.
    Keeping the issue in Needs review state for more reviews.

Production build 0.71.5 2024