-1

I created a simple sliding div on hover, by animating the left margin. This works fine unless there is an embed of google maps on the page. This issue also only occurs in Chrome Windows, and oddly enough only after you scroll a little bit down the page. If you scroll back up the animation works fine. The element is fixed so it will always appear at the top left of the page. I somewhat suspect that the animation is actually working okay, but it is just not coming across visually as you would expect.

I know it is the google map iframe that is causing the issue because if I inspect the element and delete the iframe, the animation works as expected.

Any help would be greatly appreciated!

*edit here is the code to the jquery slide animation:

$("#text-button, #text-options").hover(function () {
    $("#text-options").stop().animate({ marginLeft: "-4px"}, "fast");
}, function () {
    $("#text-options").stop().animate({ marginLeft: "-224px"}, "fast");
});

Here is a link to the website contact page which include the google map:

http://ggclinic.jteccloud.com/contact-us/

Joe
  • 15,205
  • 8
  • 49
  • 56
Calvin
  • 3
  • 2
  • 1
    After scrolling down about 200 pixels, and trying to hover over the icon, the sliding animation is no longer visible. I have tested this on two separate computers and have run into the error both times. – Calvin May 28 '14 at 13:24

1 Answers1

0

I've run into this issue a few times and the culprit is this:

-webkit-transform: translateZ(0px);

This is applied to a number of Google Maps elements and seems to interfere with the visibility of other animated elements on your page. Simply add that line to your #text-options id's styles and it will work fine.

Here's a good explanation of what translateZ(0px) does: CSS performance relative to translateZ(0)

Note: this issue only appeared for me when visiting the site with Chrome on Windows.

Community
  • 1
  • 1
Joe
  • 15,205
  • 8
  • 49
  • 56