Unwanted text movement on hover

Question

I'm building a site for a restaurant and i found a glitch on Chrome.

In Chrome when you scroll all the way to the bottom of the page and the sub menu appears, when you hover over the text it seems to move up and down, the only hover action i programmed in was the opacity change. I'm not sure why that happens.

Edit: I found it has something to do with my

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

when this is removed no hover effect is activated and this doesn't happen anymore..

more specifically i think its something to do with

    -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;

I think he means that the top menu changes when you scroll down. — gab06, Dec 27 '14 at 23:13
looks ok to me too, except those images should be jpeg not png some people pay for their bytes. — Jasen, Dec 27 '14 at 23:14
Unrelated, but you should fix these: https://html5.validator.nu/?doc=http%3A%2F%2Fwww.digitalerawebdesign.com%2Fcavo%2Findex.html — danielnixon, Dec 27 '14 at 23:16
@flo what version of chrome? I don't see anything in the sub-menu behaving oddly — jmore009, Dec 27 '14 at 23:25
@jmore009 im in version Version 39.0.2171.95 m just to confirm, you guys are scrolling down then then hovering over the navigation not the menu? — flo, Dec 27 '14 at 23:51
@flo yeah im scrolling down and hovering over "starters", "breakfast and Brunch", etc..thats what you're talking about right? — jmore009, Dec 27 '14 at 23:53
it seems to happen to me when im scrolled down about halfway through the starters menu... — flo, Dec 28 '14 at 00:00
hey guys, I think i found source of the problem, I think it has something to do with opacity.. please look at first post — flo, Dec 28 '14 at 08:30
Please stop prefixing `transition` - it's been unprefixed in every common browser for over a year now. It's never even been prefixed in IE so `-ms-transition` was never required. — Niels Keurentjes, Dec 28 '14 at 10:31

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

The problem ended up being a problem with webkit where opacity transition makes everything move in my head by 1px

the solve was

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

image moves on hover - chrome opacity issue

edited May 23 '17 at 12:20

Community

1
1

answered Dec 28 '14 at 08:47

flo

61
5

Unwanted text movement on hover

1 Answers1