While cross checking browsers for this magnifier pen I’ve been working on, I noticed something rather strange. I’ve made a circle from a rectangle, giving it 50% border radius with overflow hidden. Then I added some control buttons alongside of it.
This works well in FF but all other browsers do not seem to clip the content inside the circle correctly. When you click on the zoom level, control buttons for scaling will appear. In all browsers other than FF, the top of these buttons is somehow covered by the content inside the magnifying glass (notice the cursor change) :
http://codepen.io/Shikkediel/pen/GgZZab
Not too much to go on when I search the web apart from it being an older but apparently still surviving webkit bug (which doesn’t explain IE). Anyone seen this before and can maybe give some insight?
Easiest would be to change the z-index but I kind of like them being partially behind the circle. Thanks in advance for any tips.
Edit – sorry, had the style externally but it’s now inside the editor.
