Nechcený textový pohyb na hover - jquery, html, css

Budem stavať miesto pre reštauráciu a našiel som chybu v prehliadači Chrome.

demonštrácie

V prehliadači Chrome sa môžete posúvať až kspodná časť stránky a podponuka sa objaví, keď vznášate nad textom, ktorý sa zdá, že sa pohybuje hore a dole, jedinou akciou vznášania, ktorú som naprogramoval, bola zmena opacity. Nie som si istý, prečo sa to deje.

Edit: Zistil som, že má niečo spoločné s mojím

.nav ul li a:hover {
opacity: .6;}

keď sa to neodstráni, aktivuje sa efekt vznášania a toto sa už nestane.

konkrétnejšie si myslím, že to má niečo spoločné

    -webkit-transition: opacity .2s ease-in-out;
-moz-transition: opacity .2s ease-in-out;
-ms-transition: opacity .2s ease-in-out;
-o-transition: opacity .2s ease-in-out;
transition: opacity .2s ease-in-out;

odpovede:

Problém skončil problém s webkit, kde nepriehľadnosť prechod robí všetko pohybovať v mojej hlave o 1px

vyriešenie bolo

    -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform: rotate(0);

obrázok sa presunie na vznášadlo - chrome opacity