Streaming live at 10am (PST)

Google Map display issue in Safari when using rounded borders


#1

please refer to the below image

http://gyazo.com/481168e7710788f783377af55cc974dd

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.


#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)


#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.

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/


#7