Implementando la floating bar di New Grigo siamo incappati in un problema davvero assurdo. Tutti quei meccanismi (sia innescati da javascript che con css :hover) che funzionavano correttamente sulla barra statica, come ad esempio il dropdown menu, tendevano a rallentare o funzionare a singhiozzo (ad esempio in concomitanza con lo scroll della pagina) quando alla barra veniva dato position:fixed.

Schermata 06-2456449 alle 10.18.24

Per darvi un’idea questo è il codice css associato alla nostra barra:

#navigation.f-nav { 
    z-index: 999; 
    position: fixed; 
    top: 0;
    left: 0; 
    margin: 0;
    border-radius: 0;
    overflow: visible;
    width: 100%; 
}

E questo il codice html (semplificato):

<nav id="navigation" class="fnav">
    <div class="menu">
        <ul>
            <li>
                <a href="#">Home</a>
                <ul class="submenu">
                    <li>
                        <a href="#">Sottomenu</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</nav>

Inizialmente ho pensato a qualche baco javascript ma dopo parecchi test multi browser brancolavo nel buio… Allora ho cominciato a guardare in direzione del css e… tombola!

Ho scoperto che questo tipo di problematica è dovuto ad una proprietà css tipica dei browser basati su web-kit. Si tratta di -webkit-backface-visibility.

Infatti aggiungendo la proprietà al div padre del menu ho risolto completamente il problema:

#navigation.f-nav > .menu { -webkit-backface-visibility: hidden; }

Sembra quindi che il problema fosse dovuto a rallentamenti legati alla necessità del browser di calcolare non solo la parte visibile dell’animazione ma anche quella nascosta. Dicendo al browser di non calcolare la parte nascosta ho velocizzato l’operazione e risolto il problema.

Sia chiaro che si tratta di una mia deduzione per cui se qualcuno avesse una spiegazione più accurata è benvenuta nei commenti!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *