ryancramerdesign / ProcessWire

Our repository has moved to https://github.com/processwire – please head there for the latest version.
https://processwire.com
Other
727 stars 198 forks source link

Topnav flickering in default theme (+possible solution) #1984

Open rolandtoth opened 8 years ago

rolandtoth commented 8 years ago

When hovering on a topnav item from the bottom sometimes the submenu flickers, see screencap here:

https://processwire.com/talk/topic/13389-adminonsteroids/?do=findComment&comment=126395

We found that the cause is the subpixel top position (46.5px). Setting it to 47px seems to solve it.

ryancramerdesign commented 8 years ago

Interesting, I'd never noticed that, but now I can see it–if I move my mouse really slowly, a quick flicker every once in awhile. Unfortunately I don't think that hardcoding the top position would be ideal because I suspect that since it's a dynamically calculated top position, it likely changes slightly with differences in the way fonts are rendered between platforms and browsers. But if I could isolate the location of where it's being calculated, I could make an adjustment from there. So far I can't find it, and am guessing it's buried somewhere away in jQuery UI. I'll keep hunting though.

rolandtoth commented 8 years ago

Thanks! Meanwhile I may found why jQuery calculates this result. The "#topnav" has 0.5em margin-top and this results in 7.5 pixels (as shown in the dev tools box model figure). Perhaps changing this to a pixel value would be more safe.