Google Map display issue in Safari when using rounded borders

Community resources Bugs
1

please refer to the below image

You will see that the Google Map edges are sticking outside of the border bounds.
This seems to be only happening in Safari, all versions.

Any idea why this is happening?

2

For a reason I ignore, embeded maps aren’t affected by their parent’s overflow:hidden properties. To give round corners to a map, add a class to the map element itself and add round corners properties matching your parent’s div.

http://vincent.polenordstudio.fr/snap//Webflow_-_My_Sandbox_2015-01-26_14-33-16.jpg

1 Like
3

tried what u said, and its not working.

please have a look at my design link.
https://webflow.com/design/brightsmile?preview=eec2798ddb6106acee36c5696b56936e

its on the ‘Contact Us’ page.

4

Seems it works: (did nothing, just upon entering your designer)

http://vincent.polenordstudio.fr/snap//Webflow_-_Bright_Smile_Dental_Surgery_2015-01-26_16-41-31.jpg

5

yup in the designer (in chrome) it displays correctly. its only when u publish the site and view it in safari does it display incorrectly.

brightsmile.webflow.com

6

Ok I see the same bug in Safari.

http://vincent.polenordstudio.fr/snap//Caring_family_owned_dental_practice_providing_dental_services_with_a_smile_2015-01-27_12-06-39.jpg

I’ve had overflow bugs in Safari, and I had to rely to an SVG mask to make things work.

Here is my code (of course, you need to make and host your own mask)

                 /* fix mask overflow:hidden bug in Safari and others*/                
    .mask01     {
-webkit-mask-image: url(http://cl.ly/image/0Y3q0m0K3l1U/css-mask.png);
                }

edit: good read on css masks : http://codepen.io/yoksel/full/fsdbu/