In my previous article,
border, ` border-radius
and box-shadow` properties were used to create a slick HTML5 search box. As you may know, when using all these together, a well-known Chrome bug is triggered.
Although this bug was fixed in the latest Chrome beta releases, below you’ll see the strange (may I call it like that?) or should I better say different behavior:
Following Atul’s comment, I made a quick “investigation” and here is what I noticed.
After downloading the latest Chrome beta version (10.0.648.119 in this case), I’ve also noticed that my search box example (now updated) doesn’t looks well neither on this version (as it should look).
The normal behavior
Here’s what you need to make a perfect circle:
Note that you don’t need
border-radius: 100px for that, just half of it. Here’s a CSS3 circle example with
Check also the example - if you have the BETA Chrome version.
The strange behavior
This happens when you use for example:
Here’s the live example - again: you must have BETA Chrome version.
So, the problem (re-) appears only when the radius value is greater than half-width or half-height. If the box will have also some padding, plus the borders, height, width… Hm, should you always re-calculate the radius?! Do you get my point? :)
In order to avoid this type of situation, I think you should always be allowed to set a higher
border-radius value - as a backup.
I love Google Chrome browser, as I also love the other modern browsers. The purpose of this article is about how to make things better, as I share the idea that reporting bugs is a web developer’s responsibility.
I suppose this is also a bug? Don’t you think so? Please let me know your opinions about this subject! Meanwhile, I think I’ll report this as a bug to the Google Chrome browser project.
Tested also on Chrome 11.0.672.2 (Dev) version. The result is OK, any higher
border-radius value is allowed without causing any problem.
How to create a cool and usable CSS3 search box
CSS3 dropdown menu