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: Google Maps Design

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.

First implementation

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:

Google Maps Design in Chrome

Fixing border-radius

After some googling I found out that a wrapping div-container around the iframe might fix the problem. The trick is using overflow:hidden and 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 ...

However, Stack Overflow lists a couple of similar questions and different approaches, but the most interesting answer can be found at Doctype. Simulating the hover- functionality using the JavaScript events mouseenter (mouseover) and mouseleave (mouseout) is obviously the way to go. So, let's give it a try:

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: if(navigator.userAgent.indexOf("Trident")>0)

Mobile browsers anyone?

Forget it, there're no mouse-events on mobile devices. ;-)

Seriously, I'm talking about rounded corners. Just take a look at the different browser screenshots. Even if you use specific vendor prefixes in the wrapping container AND in the iframe itself, the content of the iframe will still come out in most of the mobile browsers. There's currently no proper way to implement a pure CSS / JavaScript solution without making a set of images that look like curved corners and using them to cover up the corners of the iframe. Fail.

blogroll
tags