Yii Framework Forum: Website Navigation Bar Bug - Yii Framework Forum

Jump to content

  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

Website Navigation Bar Bug Rate Topic: -----

#1 User is offline   SebK 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 19-April 12

Posted 20 April 2012 - 10:05 AM

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
0

#2 User is offline   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,354
  • Joined: 12-October 09
  • Location:Croatia

Posted 20 April 2012 - 02:26 PM

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...
Find more about me.... btw. Do you know your WAN IP?
0

#3 User is offline   SebK 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 19-April 12

Posted 20 April 2012 - 02:46 PM

Yes, I am talking about the dropdown B)

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

#4 User is offline   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,354
  • Joined: 12-October 09
  • Location:Croatia

Posted 20 April 2012 - 03:27 PM

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.
Find more about me.... btw. Do you know your WAN IP?
0

#5 User is offline   SebK 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 19-April 12

Posted 21 April 2012 - 03:58 AM

http://youtu.be/UVLIpgFS5QE

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

#6 User is offline   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,354
  • Joined: 12-October 09
  • Location:Croatia

Posted 21 April 2012 - 10:05 AM

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...
Find more about me.... btw. Do you know your WAN IP?
0

#7 User is offline   bluyell 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 222
  • Joined: 28-October 11

Posted 21 April 2012 - 11:47 AM

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

#8 User is offline   bluyell 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 222
  • Joined: 28-October 11

Posted 21 April 2012 - 12:22 PM

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

0

#9 User is offline   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,354
  • Joined: 12-October 09
  • Location:Croatia

Posted 21 April 2012 - 02:00 PM

@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%
Find more about me.... btw. Do you know your WAN IP?
0

#10 User is offline   Suralc 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 48
  • Joined: 10-January 12
  • Location:Germany

Posted 21 April 2012 - 02:09 PM

View Postmdomba, 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.
0

#11 User is offline   bluyell 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 222
  • Joined: 28-October 11

Posted 21 April 2012 - 03:16 PM

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
0

#12 User is offline   bluyell 

  • Standard Member
  • PipPip
  • Yii
  • Group: Members
  • Posts: 222
  • Joined: 28-October 11

Posted 21 April 2012 - 03:23 PM

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:




Posted Image




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

Posted Image

1

#13 User is offline   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,354
  • Joined: 12-October 09
  • Location:Croatia

Posted 22 April 2012 - 02:24 AM

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...
Find more about me.... btw. Do you know your WAN IP?
0

#14 User is offline   SebK 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 19-April 12

Posted 22 April 2012 - 04:39 AM

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

#15 User is offline   samdark 

  • Having fun
  • Yii
  • Group: Yii Dev Team
  • Posts: 3,727
  • Joined: 17-January 09
  • Location:Russia

Posted 22 April 2012 - 04:44 AM

Reproduced on Win7 / Chrome + 110% zoom. My screen resolution is 1920×1080.
Yii 1.1 Application Development Cookbook

Enjoying Yii? Star us at github: 1.1 and 2.0.
0

#16 User is offline   samdark 

  • Having fun
  • Yii
  • Group: Yii Dev Team
  • Posts: 3,727
  • Joined: 17-January 09
  • Location:Russia

Posted 22 April 2012 - 05:03 AM

Fixed. Will be there with next website deploy.
Yii 1.1 Application Development Cookbook

Enjoying Yii? Star us at github: 1.1 and 2.0.
0

#17 User is offline   Maurizio Domba Cerin 

  • Yii - Yesss It Is !!!
  • Yii
  • Group: Yii Dev Team
  • Posts: 4,354
  • Joined: 12-October 09
  • Location:Croatia

Posted 22 April 2012 - 05:26 AM

nice idea to use a transparent border ;)
Find more about me.... btw. Do you know your WAN IP?
0

#18 User is offline   bennouna 

  • Master Member
  • PipPipPipPip
  • Yii
  • Group: Members
  • Posts: 1,166
  • Joined: 05-January 12
  • Location:Morocco

Posted 22 April 2012 - 05:27 AM

View PostSebK, 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.
0

#19 User is offline   softark 

  • Keep It Simple
  • Yii
  • Group: Moderators
  • Posts: 2,083
  • Joined: 16-February 11
  • Location:Japan

Posted 22 April 2012 - 10:11 AM

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.

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

#20 User is offline   SebK 

  • Junior Member
  • Pip
  • Yii
  • Group: Members
  • Posts: 40
  • Joined: 19-April 12

Posted 22 April 2012 - 01:25 PM

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

Share this topic:


  • (2 Pages)
  • +
  • 1
  • 2
  • You cannot start a new topic
  • You cannot reply to this topic

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users