CODEWITHSUNDEEP
cssgoogle-chrome
user1729819
user1729819

Reputation: 105

Annoying Border Radius Clipping in Chrome

I've setup a page of circular buttons. When the mouse hovers over them individually, they rotate to show the reverse of the button.

It's loosely based on this demo from CoDrops http://tympanus.net/Tutorials/CircleHoverEffects/index4.html

My problem, is that when the mouse hovers over a certain button, I want to reveal the reverse of multiple buttons on the page at the same time (i.e. to flip them).

This works fine in Firefox and mostly OK in Chrome where it not for the buttons becoming clipped at the edges.

Here is the demo site: http://www.qars.co.uk/spumma/v2/

This is how it looks in Chrome when you hover over the middle image: http://cl.ly/image/1K0y1y0t1z2j

Again, works great in FireFox, I just can't see where Im going wrong with Chrome.

Upvotes: 0

Views: 123

Answers (2)

Toby Osborne
Toby Osborne

Reputation: 375

seems like the issue is with 

-webkit-perspective: 800px;

on .ch-info-wrap

Not sure what it does but it seems removing makes it work.

Upvotes: 0

kei
kei

Reputation: 20521

On your .fakeit CSS rule,
add box-shadow: 0 1px 15px rgba(0,0,0,0.1);

Upvotes: 1

Related Questions