[SebK]

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.

I just thought I'd let you know.

Cheers

Seb

[Maurizio Domba Cerin]

You mean the main menu of the yiisite where about, download, documentation... is ?

When you hover over them you get a dropdown (that's not a popup )

I just tested on chrome 18 for linux.. .and everything works as suposed... please give more details... what is the OS you use, the browser version number... the page where you notice this problem...

[SebK]

Yes, I am talking about the dropdown

I'm using Win7 and Chrome 18, latest version.

This isn't meant to be a complaint. I'm not on a particularly rare setup, afaic, so I thought I'd let you know. If I am actually the only person with the problem then obviously don't worry.

It happens on all pages that have the main menu.

[Maurizio Domba Cerin]

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.

[SebK]

http://youtu.be/UVLIpgFS5QE

That's all I can tell / show you...

[Maurizio Domba Cerin]

Great you managed to make a video... unfortunately i don't have a win7 to test this... can someone else confirm this problem?

What I noticed is that between the "hovered" menu item and its submenu you get one white line of 1px.. .I don't get this line at all...

do you have javascript enabled/disabled... try to reverse it to see if it works that way...

[bluyell]

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.

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

[bluyell]

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 : "border: 1px solid #999;"

taken from: layout.css on yiiframwork.com website:

// 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
{
	position:relative;
	display: inline;
	margin: 0;
	padding: 0;
	float: left;
	border-right: 1px solid #999;
	text-transform:lowercase;
	line-height: 19.5px;
	
	border: 1px solid #999;  // THIS LINE SOLVE THE PROBLEM WHEN CHROME ZOOMS TO 50%
}

[Maurizio Domba Cerin]

@SebK Can you please confirm that you did zoom the site in chrome?

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

[Suralc]

mdomba, on 21 April 2012 - 02:00 PM, said:

@SebK Can you please confirm that you did zoom the site in chrome?

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.

[bluyell]

hello, is not sufficient to zoom to 50%, if you pass the mouse over the Menu <a> link it will function, but if you move the mouse over the LI ( not the <A> ) , then error occurs.

Chrome version: 15.0.874.106 m
OS: Windows 7.

please let me extract to cases in this files (you can see the html source and css code) ,

AS IS, WITHOUT ANY CHANGES,
put chrome on 50% an try the menu, it dissapears as yii site does too.
http://www.websoftfa...est/test-1.html



WITH CORRECTION

put chrome on 50% an try the menu, it will function correctly.
http://www.websoftfa...est/test-2.html

[bluyell]

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:

[Maurizio Domba Cerin]

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

[SebK]

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.

[samdark]

Reproduced on Win7 / Chrome + 110% zoom. My screen resolution is 1920×1080.

[samdark]

Fixed. Will be there with next website deploy.

[Maurizio Domba Cerin]

nice idea to use a transparent border

[bennouna]

SebK, on 22 April 2012 - 04:39 AM, said:

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.

[softark]

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.

 chrome.png (27.72K)
Number of downloads: 10

[SebK]

I'm back on my original system and I can confirm that the problem disappeared when I went back to 100% instead of zoomed. I assume it's sorted anyways.