I am a developer and I know how hard it is to solve difficult issues while programming in case you did not get any help. I have faced this so many times. That's why I started this blog so that I can share problems and solutions with developer community. In case if you face any issue in programming do check my blog once, it will surely save your time.
CSS Border Radius Not Working in Android WebView or Chrome
Recently while working on mobile app project which was cross platform application we were creating pie shaped menu where we faced a very strange issue.
Actually I was trying to create following menu and I created that successfully while I was working in Xcode and iPhone simulator.
And it worked fine but as soon as I checked it in Android phone it came up like following.
Now that was so embarrassing. Off course, after spending couple of days to make such menu and it came up like this, that is so disappointing. How ever after spending some time over it I found out a solution, in this blog I am going to explain this. There more than one solutions so I posting each one.
1) Some older version does not support percentage value.
Some older version of chrome does not support percentage values for border radius. So instead of percentage give pixel values.
Use border-radius : 50px in stead of border-radius : 10%
2) Specify top, left right and bottom property separately.
some Chrome does understand single value like border-radius : 50px. So here you have to specify each border radius saperately.
Use border-top-left-radius: 50px;border-top-right-radius: 50px;border-bottom-right-radius: 50px;border-bottom-left-radius: 50px;
In stead of
border-radius : 50px
3) Now here comes the issue which I have faced, background-color "leaking" outside of a border when border-radius is present. In my case there were few div tags which was having background color and was going out side of main container because of transformation. So here are the two solutions you can do.
Apply overflow: hidden property to main container
If that does not work apply following CSS property to main container.