0

I was trying to apply rounded corners to an OpenLayers Maps, and found that it works in Firefox, but not in Chrome. I found a related question Openlayer map with rounded corners which linked me to another question CSS Border radius not trimming image on Webkit, which explained that Google Chrome does not apply the rounded corners to grandchildren Images.

However, while testing if I could apply it directly to the children, I found a strange behavior. If I open up chrome, and test the code out, it gives the wrong behavior(Images do not have the required rounded corner), but when I go to the Developer tools, and mouse hover over the elements tabs (which highlights the various divs in the page), the style is applied correctly, and I get the expected output with rounded corners. You can test out the behavior on this jsfiddle: http://jsfiddle.net/K9qQ2/2/

The CSS code I have used is as follows:

#map{
    border: 6px solid #7AC49F;
    border-radius: 30px 30px 30px 30px;
    bottom: 0;
    display: block;
    height: auto;
    left: 0;
    margin: 39px 10px 10px;
    position: absolute;
    right: 0;
    top: 0;
    background-color:#eee;
}

div.olMapViewport {
    border-radius: 25px;
}

.olLayerDiv{
   border-radius: 25px; 
}

So is this a bug? Is there anyway to get Google Chrome to apply the style without going to the developer tools?

Community
  • 1
  • 1
Devdatta Tengshe
  • 4,015
  • 10
  • 46
  • 59

1 Answers1

0

Try adding display: block; to the other divs. It seems to work in jsfiddle.

Justin
  • 808
  • 1
  • 7
  • 15
  • Doesn't seem to be working for me in Google Chrome:26.0.1410.64 http://jsfiddle.net/K9qQ2/3/ Can you link to the jsfiddle where it works? – Devdatta Tengshe May 16 '13 at 07:24
  • Hm, might have been a Chrome bug. See: https://pcbx.us/justinwiz/ahlt.png Some of the corners are not being rounded, but it certainly is being applied to the map. – Justin May 16 '13 at 07:36
  • ^ running Chrome for Mac 26.0.1410.65. Seems to be working sporadically when reloading the jsfiddle page as well – Justin May 16 '13 at 07:38