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.
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 <LI> 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.
<div><br></div><div><b><font class="Apple-style-span" color="#ff0000">CHROME: PROBLEM WHEN ZOOM</font></b></div><div><font class="Apple-style-span" color="#0000ff">IE9: WORKS FINE.<br>FIREFOX: WORKS FINE.</font><br><br></div><div><br></div><div><br></div>
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:
please considere that this problem occurs only in CHROME:
add this line to your LAYOUT.CSS : [color="#0000ff"]"border: 1px solid #999;" [/color]
// original file is: [url="http://www.yiiframework.com/css/layout.css"]http://www.yiiframework.com/css/layout.css[/url]
// applies only to chrome
.layout-main-header .menu li
border-right: 1px solid #999;
border: 1px solid #999; // THIS LINE SOLVE THE PROBLEM WHEN CHROME ZOOMS TO 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.
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.