can't seem to find what the problem is. firefox works fine - but safari doesn't.
a simple css dropdown menu but in safari the dropdown drops down but as soon as you try to place the mouse on the dropped down element it goes away - only if you move your mouse extremly fast on the dropped down element it doesn't hide.
http://singknaben-v2.marknolan.ch
hover your mouse "DER CHOR" and try to navigate on a child element with safari.
i can't see what the problem is. any help appriciated...
thanks,
mark
The problem is that the element is not tall enough. The mouse stops hovering over the element before it can reach the subelements. It can be quite simply fixed by applying a "height" css style of around 30px.
Related
I've got a safari-specific problem with a hover effect:
When the user moves over a circle, another circle should appear over it (offset).
This works, but when the user moves his cursor off the circles, parts of the hover-circle still remain until the browser redraws the site (not sure if "redraw" is the right term) . You can do this with Cmd+A to select all text, for example. The hover--leftovers will disappear then.
I think an example shows it the best:
http://jsfiddle.net/L81h9hjr/3/
<div class="wrap">
<h1><span>Reply<span>Our services</span></span></h1>
</div>
The example works flawlessly in other browser I tested, so you need a Mac Safari (I tried 8.0.6).
This is a repaint/redraw issue with Safari / webkit (not sure why it's only on Safari and not Chrome).
I worked around this issue by attaching a jQuery event to the hover element that forced it's surrounding/parent elements to redraw (in my case, a hide() and then a show(0)).
$('.hover-element').on('mouseleave',function(){
$(this).parents(".containing-element").hide().show(0);
});
Make sure you use show(0) not just show(), for some reason plain old show() doesn't get fired without an animation argument.
I have edited the CSS on my menu on this site:
So it would display completely across at the font size I want (previously it was turning into a two layer menu). However, now for some reason the submenu under "Show Your Support" is very difficult to click on. When you hover and try to move your mouse down to an option it disappears half the time before you can click on anything.
I have played around with the code in Chrome (inspect element) and I can't seem to find out what is wrong. Can someone assist me, please?
Thank you.
There is a gap between the menu and where the sub-menu appears. See Image below:
When you hover away from the menu item and the mouse is on its way to the sub-menu, the mouse ceases to be on 'hover' (while crossing over the gap) - making the sub-menu disappear.
If you can eliminate the gap (i.e. place where the sub-menu is positioned higher up the page), the 'hover' state will remain on mouse-move and the sub-menu will stay 'shown' for clicking.
Does that help?
PS
posted as an answer (instead of comment) so I could include the image in my explanation.
In your show your support tag, inside add this style
style="padding-bottom:10px;"
So that I am able to operate now without any hover before on click issue. try and let me know. I tried in IE.
Recently I encountered a rendering issue in Webkit which I suspect to be a bug with the Webkit engine. But I am not confident enough to say so. So I would like ask here and see what you think.
It'd be a bit difficult for me to describe the case in plain text, so I prepared a snippet here:
http://jsfiddle.net/2eQXa/1/
First you can see a yellow background with red border. This is not a background of the <body> tag but a <div> with id "backdrop" which has 100% width and height. By default it links to the "backdrop-no-problem" class. Also there is a horizontal list with some images. The list is surrounded by a green border. Inside the list there are some Wikipedia logos wrapped with a dotted red border.
I tested the page with the following 3 devices:
1. Chrome 21 on Windows 7
2. Mobile safari on the first generation iPad (running iOS4, I'll call it iPad1)
3. Mobile safari on the "new" iPad (running iOS5, I'll call it iPad3)
Try clicking "right" or "left" to scroll the list. Pretty good.
To reproduce the my problem, first click on "Issue #1". This will change the backdrop div from "position:absolute" to "position:fixed". Then click "Issue #2". This will add "-webkit-backface-visibility: hidden;" to the element (The reason for adding this style is to ensure smooth animation on the iPad).
Now click "left/right" to scroll the list. You should see a strange behavior in all three browsers:
The green div is scrolling properly and smoothly, but not its child elements. The child elements simply "out-sync" with the position of the scrolling parent. The movement not only looks laggy, it sometimes even stuck. And the child elements will stop at a wrong position when the scrolling animation finishes. You have to move your mouse over the picture (or tap on it in a tablet) to trigger an update to have the element re-drawn at the right place. Even Chrome shows this weirdness makes me feel that it is a Webkit issue.
Things gone worse in iPad3. In iPad3 you don't need to add "-webkit-backface-visibility: hidden;" (Issue #2) to see this weird behavior. Just add "position:fixed" (Issue #1) will do. The strange thing is that this doesn't happen when you view the snippet in jsFiddle. In case you are interested I have put the source in a single file at pastebin:
http://pastebin.com/i4ARX4mD
When writing this question I saw quite a number of questions regarding backface visibility. I've checked some but none of them matches my problem.
Ideas or suggestions are welcome. Thanks!
(Post updated to fix many typos)
Please take a look at this code: http://jsfiddle.net/6JnJb/1/
My problem is that in chrome, the divs doesn't change their color if the mouse is over them, when scrolling. If I move the mouse over a div 'manually' (not when scrolling) than it changes it's color to red.
In Firefox it works perfect, but not in Chrome.
Can I solve this problem or simply this how Chrome works?
Chrome does not propagate mouseover events right away when scrolling. There really isn't any way around this issue, since it is giving priority to the scrolling event rather than the hover event on a particular element.
The behavior I see is that the hover effect doesn't move with the still mouse on scroll but catches up when the scroll speed is sufficiently low.
I'm having an issue with my navigation, the first list item appears to have a huge gap on the right.
I have a list of links inside an UL each have their own class so I could set a background icon to them. The first link has a background to give it the rounded effect.
I used relative to push to left so it would have that rounded effect for the hover and active states on the homepage and hover for when i'm on other pages.
Now it all works fine in new browsers apart from IE7 and probably older versions.
I've put it on JSFiddle to make it easier to view.
http://jsfiddle.net/datastream/Gta3h/2/
and http://eminemforum.net/navtest/nav2.html
Thanks
Live Demo (edit)
I got rid of <div id="navHold">.
I removed right: 40px from #topNav2 .home-icon.
I changed the width of #Navigation-Holder from 750px to 830px to make it appear the same width it was before I changed anything.
I've tested that this looks consistent in: IE7, IE8, Firefox, Chrome.