border-radius not respected after google map rendering

Question

Strange problem here, help apreciated.

I have a page populated with houses for renting and a Google map.
All houses info and images are generated by php/SQL so the <li> and <div>structure is the same.

I croped the thumb of each house by hiding it in a div with overflow:hidden. I put also border-radius on that div. All works good for 1 second until google maps has loaded.

The problem is that after google map has loaded, some pictures ignore the border-radius CSS setting and the visible part of those images/thumb "jump out" - (but not the hidden part of the image) . I see the border disappearing behind the corners but the image doesn't respect the border-radius anymore.

EDIT_1: this is only happening in Chrome.

ANSWER: It seems to be a webkit but. See here.
"Removing the position:absolute declaration from the img elements seems to resolve this issue" - Thank you @Boaz

What is happening here? any better way to do this? Thanks

Screenshot here

Zoomed detail

Can you see that the elements still have the CSS applied to them? — Ian, May 10 '13 at 18:46
Hi @Ian, yes they do. I see the border of the div intact with the radius, and also on the Developer tools — Sergio, May 10 '13 at 18:54
post up a fiddle or something this would be impossible for anyone to figure just on images — David Nguyen, May 10 '13 at 19:36
@davidstrachan, interesting and strage. I have two pc at home with same problem on Chrome, same Chrome ver. but different windows os. Same problem on mobile/chrome — Sergio, May 10 '13 at 19:49
Chrome Version 26.0.1410.64 m Windows Vista Have you tried clearing caches? — david strachan, May 10 '13 at 20:05
possible duplicate of [Transparent rounded corners on Google Map](http://stackoverflow.com/questions/6894439/transparent-rounded-corners-on-google-map) — Dr.Molle, May 10 '13 at 21:51
Removing the `position:absolute` declaration from the `img` elements seems to resolve this issue. — Boaz, May 10 '13 at 22:22

score 0 · Accepted Answer · edited May 23 '17 at 11:52

0

Thank you for help. It's a Chrome bug.

"Removing the position:absolute declaration from the img elements seems to resolve this issue. "– Boaz

More info here

edited May 23 '17 at 11:52

Community

1
1

answered May 13 '13 at 05:17

Sergio

28,539
11
85
132

border-radius not respected after google map rendering

1 Answers1