The navbar icons is zoom with the next icon too

Abierto

#4,358 abierto el 23/12/2025 1 comentario 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad: 3/5
Tiempo estimado: 1-2 días
Aptitud para principiantes: 48/100

Tipo de issue: Error
Claridad: Bastante claro
Estado de actividad: Tranquilo
Stack tecnológico: javascript
Área: frontend, mobile

Línea de trabajo

Reproduce el problema en el ejemplo de navbar de Framework7 enlazado en la vista móvil, comparando el modo normal con el tema iOS. Inspecciona los estilos de los iconos de la navbar y el comportamiento de interacción alrededor de los iconos adyacentes; se considera terminado cuando ampliar un icono ya no afecta al siguiente icono.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Before update to 8+ version this was worked, but currently the navbar icons are just zooming but it affect the next icon too. Please check the following code and video

...
    <div class="navbar navbar-transparent">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="left">
          <div class="padding-left">
            <div @click="${subscribeOrProLink}">
              <div class="text-align-center">
                <img src="${proImage}" class="homeIcon"/>
                <div class="homeText trPro">Pro</div>
              </div>         
            </div>
          </div>
          
          <div class="padding-left">
            <div @click="${preShareApp}">
              <div class="text-align-center">
                <img src="${shareImage}" class="homeIcon"/>
                <div class="homeText trShare">Share</div>
              </div>
          
            </div>
          </div>
        </div>

        <div class="right">
          <div class="padding-left padding-right">
            <div @click="${showLanguageSlectPopup}" class="homeLink touchable-img">
              <div class="text-align-center">
                <img src="${translateIcon}" class="homeIcon"/>
                <div class="homeText trTranslate">Translate</div>
              </div>
          
            </div>
          </div>
        </div>
       
      </div>
    </div>
...

https://github.com/user-attachments/assets/a41016c5-0ab0-4444-9d97-e8ea121bf7c8

Also this issue is available in your navbar example, url is
https://framework7.io/docs-demos/core/navbar-hide-on-scroll?theme=md&mode=light
Note: Working in normal mode, you can see the problem in mobile view only. I think this style is applied from ios theme

Please check the video below

https://github.com/user-attachments/assets/f8b15902-d9a6-4f1c-9bae-fa727fc1fff7