0

Examples:

Compare the feed of tweets on Twitter.com in Chrome and Safari. When the mouse is kept stationary and the feed is scrolled through using the track pad or mouse wheel, the hover states are not triggered. It seems that the cursor is only targeting elements in Safari when the cursor is moved and not when the browser window is scrolled. This holds true for both CSS and JQuery hover states.

Ex.fm has been able to solve this issue. If you scroll the browser window with a stationary cursor over the list of songs the hover state is triggered. Must be some way to hack this Safari specific issue.

KeenanC
  • 33
  • 5

3 Answers3

0

The answers to this question may give you a hint on how to proceed. What happens in Firefox?

Safari iphone/ipad "mouse hover" on new link after prior one is replaced with javascript

Community
  • 1
  • 1
Samantha John
  • 978
  • 1
  • 8
  • 18
0

This is fixed in recent versions of "Webkit Nightly." It's almost certain to be in the next major version of Safari.

Eric_WVGG
  • 2,957
  • 3
  • 28
  • 29
0

Safari does not detect mouse position (and therefore trigger a hover state) when scrolling with the trackpad or scroll-wheel unless the object your are interacting with is inside of a scrollable div. You can nest an entire feed of content inside of a div set to overflow:scroll; to allow for dynamic targeting on scroll. Then *set your div to fill the entire screen and you give **the appearance of scrolling the page while actually only scrolling within that div.

Check out this JSFiddle example: http://jsfiddle.net/8Nkpr/26/

And this example from Graham Hicks: http://jsfiddle.net/U7SGh/

--

*Clearly this becomes a problem if you are doing any animation or interactions that rely on using JQuery to detect scroll position. Sorry folks, no parallax with this trick.

**This is how ex.fm (as mentioned in the original question) solves it.

***Thanks to Graham Hicks (@gmh) for pointing us in the right direction.

KeenanC
  • 33
  • 5