I have a site created using the Danland theme with superfish menu which works perfectly on my localhost version. However, on the live version if I place the mouse pointer over any one of the parent items the child items are dropped down as expected, but if I then move the mouse pointer down slowly, the child items disappear as soon as I reach the bottom edge of the menu bar, with the finger pointer changing to an arrow.
If I move the mouse rapidly onto the child items they either remain visible or they disappear momentarily as the pointer crosses the bottom edge of the menu bar, to re-appear again
A similar issue was solved by adding 'z-index:100' to the #superfish li {.... style, however this has made no difference in my case.
This problem is the same in IE8, Firefox 11.0 and Chrome 18.0
Any suggestions please

Comments

danpros’s picture

danpros commented
Category: bug » support

Hi,

How about clearing the Drupal cache? if on localhost is fine than it should fine also on live site.

Dan

Peters196’s picture

Peters196 commented

Hi Dan
Clearing the Drupal cache makes no difference.
I don't know whether this is a fix, or whether it is just masking the problem but I have minimized the effect by changing the value of timeout in hoverintent.js from its default value of zero to 100. The menu now disappears only if I move the mouse pointer very slowly from the parent item to the child items.

Peters196’s picture

Peters196 commented

I thought I had improved the situation by changing the value of timeout, but the child items still disappear when moving the mouse pointer slowly from the top item onto the sub-menu (child) items.
Is it possible that there is a minute gap between the menu items which, when the mouse pointer lands on the gap the menu disappears?
I can't see the relevant statement in the style sheet which defines the vertical position of the menu items.
I see on the Drupal Superfish module the child menu items overlap the parents. Is this possible in the Danland theme? Would this be a possible solution?
I do hope someone can suggest a solution. If you would like to look at the site and see if you are getting the same effect, or suggest a solution look at www.beechhillvillage.co.uk

luk.stoops’s picture

luk.stoops commented

Hi,
I have the same problem (stoops.es) but only with Chrome and only on the life site, and strangely enough, if I add www to the url (www.stoops.es) the problem disappears.
On the other hand the www.beechhillvillage.co.uk site seems to work fine for me in different browsers, did you find a solution?
Luk

luk.stoops’s picture

luk.stoops commented

I was able to track down the source of my problem.
I tried to figure out why I had a problem in “stoops.es” and not in “www.stoops.es”.
As it turns out it was related to my browers zoom settings, apparently they are stored per domain.
After resetting the zoom of “stoops.es” to 100% everything works fine again.
So maybe that was also the problem of Peter, maybe using a high resolution screen that led him to zoom in in it’s website?
Anyhow I found out that for me the issue of disappearing menu child items occurs only in chrome and safari when I zoom in to certain levels (as an example the first level zoom 110% in chrome and safari ). IE and firefox seems to handle zooming ok.
Hope this might be kind of help
Luk

Peters196’s picture

Peters196 commented

This is VERY puzzling!
I thought I had fixed it yesterday (Saturday) as the result of a long chat with fireh and dbazuin on the #drupal-themes IRC channel.
Between them they suggested the following changes to style.css:
Change top:32px; to top:100% in #superfish .menu li:hover ul, #superfish .menu li.sfHover ul

add a new rule:
#superfish .menu > li { height: 32px; }

add:
.expanded {
display: block; }

Having added all of these to my style.css the problem was fixed!
Interest to know which of these changes was the one that actually fixed the problem I removed them one at a time until I had removed them all, and the problem was still fixed!!!

I looked at stoops.es and www.stoops.es yesterday and they both worked perfectly for me, even at high magnification!

Although I am glad that the problem has been fixed for me, it's clear that we need to make some changes somewhere so that other users of our sites do not have the same problem.
.
Any thoughts danpros?

luk.stoops’s picture

luk.stoops commented

Puzzling indeed, but maybe you changed your zoom during the experiments?

I’m still convinced that zoom settings play a role here, the fact that they are stored per domain explains the different behavior with or without the www prefix and it explains also why the site behaves different on a localhost version and a live version simply because the url’s are different.

Could you please try to reproduce the issue following these steps:

• Start the chrome browser
• Open www.stoops.es (or www.beechhillvillage.co.uk)
• Check that the zoom level is 100% (or press Ctrl and 0)
• Increase the zoom level one step (Press Ctrl and +)
• Check the drop down menu’s

Peters196’s picture

Peters196 commented

You are absolutely right Luk! 100% magnification ok. 110% magnification not ok! 125% not ok. 200% ok!
I currently have the style.css in it's un-modified form (like yours i guess).
I need to put the suggested mods back in and check them carefully at different magnifications. (stupidly I forgot to save the modified version!)
I will let you know what I find.

luk.stoops’s picture

luk.stoops commented

Hi,
Since scaling is involved I guessed that we might be dealing with the most common computer error in history, losing accuracy by storing the result of a division in an integer. So I tried to add an extra pixel to the height of the menu balk in order to accommodate with this expected loss of accuracy.
This is how it works, in the style.css (or your local.css) increase the menu padding-top from 11 to 12px.

#superfish .menu a, #superfish .menu a:visited  {
color:white;
text-decoration:none;
font-size:12px;
font-weight:bold;
text-transform:uppercase;
padding-right:30px;
padding-left:30px;
padding-top:12px;
}

Then empty caches (admin/config/development/performance).
It solved the problem for me, can you check it out?

Peters196’s picture

Peters196 commented

Yes!! I think you have fixed it! Your site looks fine at all magnifications.
Having changed padding:top from 11px to 12px my site looks fine too, except that I appear to have a similar issue with rounding of horizontal pixels at large magnifications (I have altered the default left/right padding to accommodate more menu items!)
Thank you for your help!

drupal4u.org’s picture

drupal4u.org commented

In one of my projects I experienced the same problem using Danblog 7.x-1.0. Thus I can confirm the problem as described by by Peters196. I can also confirm his quickfix (changing the value of timeout in hoverintent.js from its default value of zero to 100). Though this is not the perfect solution, I think that nobody moves the mouse so slow, that the problem still occurs. On the other hand I can't confirm the solution offered by luk.stoops ( increasing the menu padding-top from 11 to 12px).

christopher james francis rodgers’s picture

christopher james francis rodgers commented
Issue summary: View changes

Is this possibly a problem caused by conflicts from using "px";
since "em' and "%" are undoubtedly also 'in-the-mix'.

I would think single-pixel-variations would undoubtedly occur as I 'zoom';
and/or change the browser windows size one-pixel-at-a-time?

Leeteq’s picture

Leeteq commented
Version: 7.x-1.0 » 7.x-1.x-dev
Related issues: +#2174595: Superfish Menu Won't Drop Down on Secondary Pages, i.e. About, Blog, etc.

May this be jQuery related? See the tips in the linked issue.
If so, please set this issue as fixed.