Website Navigation Bar Bug
Rate Topic:

When I hover over the grey navigation bar, the popups come out as intended. When I then move the mouse over one of the submenus, they immediately disappear. It works when I use FF but on google chrome, the navbar doesn't work properly.

Don't worry I don't think you are complaining... in the end we all want that the site works as intended for all users... but to solve the problem I need to repeat it so to be sure there is a problem...

I just tested on windows XP with chrome 19.0 and again I cannot repeat the error you are describing, the submenu options can be selected without problem.

To reproduce the problem follow this steps:<br><br>1-browse on any yii page<br><br>2-REDUCE YOUR BROWSER ZOOM to 50%<br><br>3-when you move your mouse over the GRAY ZONE it will dissappear, but dont if you move your mouse over the MENU LABEL EXACTLY.<br><br><br>This will be happen due to a CSS problem (maybe obviously, maybe not so obvious). MAYBE the reason will be that the LABEL havent a defined "width: 100%;" css style, and then when zoom is 50% the rest of the &lt;LI&gt; gets uncovered by the label, of course when mouse gets off the label they launch an event that signalize to make the entire UL invisible because the mouseout event is launch.

i found a solution to this problem (only appears on chrome when zooming down) :

i could reproduce the problem extracting your UL html code for the MENU, and downloading the currently LAYOUT.CSS file, and the problem appers on my PC inmmediatly when I zoom to 50% the test.html page created from the extracted components.

i have the same problem with my website few months ago, and the same solution applyes to Yii Site:

Chrome 18.0 on linux does not have this problem even when zoomed at 50%

Can confirm this on win7 x64 with chrome 18. Dropdown will dissappear, if you touch the first grey zone. But this only happens for me with 110% zoom(using 1366x768). 125% Zoom works fine. 50% Zoom works fine, too.

If you note the two examples above, in test case 1, you will see a very very small transparent space between the menu and the list, this space will cause the MOUSEOUT and cause the menu to dissappear,

In the second case, due to the border added, this transparent space is inexistent, and will not cause the mouseout event preventing the undesired effect that appers only in a limitated space of opprtunities.

THIS HAPPEN USING THE TEST CASE PROVIDED:

AND THIS HAPPEN IN THE YII REAL SITE, NOTE THE SAME TRANSPARENT SPACE:

I'm still waiting for SebK to confirm that he did zoom to get this error... The whole menu is made with background images and when chrome zoom is used all those background images are misplaced for 1px, that's why the white line appears... not sure how and if to fix this as this is obvious a chrome issue...

I'm not at home atm so I don't have access to my particular setup. I don't remember zooming but it's possible that I went to something like 110-120% with CTRL + mouse wheel. I'm currently on my girlfriends macbook and in chrome, if I zoom by one increment (using pinch), I get the same kind of behavior with a disappearing bar. The failure rate on this setup isn't as high as in the video but still happens a lot, when zoomed.

I'll confirm the zoom settings of the video once I get home. For now I can partially replicate the problem in chrome on a mac by zooming one increment.

I'm currently on my girlfriends macbook and in chrome, if I zoom by one increment (using pinch), I get the same kind of behavior with a disappearing bar. The failure rate on this setup isn't as high as in the video but still happens a lot, when zoomed.
…
For now I can partially replicate the problem in chrome on a mac by zooming one increment.

Fyi, I cannot reproduce the described issue on Mac OS X 10.6.8 / Chrome 18.0.1025.163 (maybe it's already corrected, but I couldn't reproduce even yesterday) by zooming in and out, using keyboard or pinches/reverse pinches.

I've confirmed the symptom in 110% and 90% zoom rates.
Windows Vista 64 / Chrome 18.0.1025.162 m / Japanese
It's OK in other zoom rates. It seems to be related to the rounding error in dimension calc, and I guess also the default font and/or line-height of the browser could act as a factor.