Have you ever tried combining the elements Google Maps, IFrames, rounded corners and :hover on one website? No? Then don't even start thinking about it! You will fail.
At the beginning there was this idea: Let's implement Google Maps on a website with the following fancy looking style:
Additionally, let's try integrating a hover-effect due to the quite small default size of this map. Every time a user hovers over the map, it should resize automatically. Well, since CSS transitions is supported by all modern browsers by now, it doesn't seem to be that difficult.
After exporting the current location as an embed map (an iframe-tag) in Google Maps, I started with the following code that relies on border-radius to implement rounded corners:
A first short design check including the hover-animation looked good in Firefox. But in Google Chrome, the content comes out of the iframe, as the following image shows:
After some googling I found out that a wrapping div-container around the
iframe might fix the problem. The trick is using
position:relative in the surrounding div:
Now the iframe including the hover-animation looked perfect, both in Google Chrome and Firefox.
:Hover in an iframe in Internet Explorer
Although the above code looks and works perfectly in Firefox and Chrome, the Internet Explorer doesn't seem to support the pseudo-class :hover in combination with iframes. For whatever reasons ...
Perfect! But there are a few things worth mentioning. First of all, the
implementation is based on jQuery 1.9.x and beginning with this version you're
not able to use the property
jQuery.browser for browser detection anymore.
Furthermore, Internet Explorer 11 no longer reports as MSIE, as modern
websites should rely on other techniques such as feature detection. However,
in this scenario we need to implement a workaround for a specific browser
issue. And the only way to detect all versions of the Internet Explorer, is
checking for Trident in the user agent string:
Mobile browsers anyone?
Forget it, there're no mouse-events on mobile devices. ;-)