CODEWITHSUNDEEP
csstransform
nmford
nmford

Reputation: 151

Chrome CSS transform scale display issues

I'm getting some issues trying to use the transform scale CSS property.

Here's my CSS on hover:

#pricing-table .pricing-column:not(.labels):hover {
position: relative;
z-index: 50;
-webkit-transform: scale(1.02);
-moz-transform: scale(1.02);
-ms-transform: scale(1.02);
-o-transform: scale(1.02);
transform: scale(1.02);
-webkit-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
-moz-box-shadow: 0 0 3px rgba(1, 1, 1, 0.3);
box-shadow: 0 0 3px rgba(1, 1, 1, 0.3); }

Here's the result, note the weird grey border on some of the list items: Screenshot of issue

I've had similar issues with chrome and CSS3 transforms before and have never been able to figure out how to solve them. Would appreciate any insight! Thanks

Here's the live demo: Demo Link

Upvotes: 0

Views: 1364

Answers (1)

Toni Andrić
Toni Andrić

Reputation: 38

U can try to add borders. I checked your code and this worked.

#pricing-table .pricing-column:not(.labels) li,
#pricing-table .pricing-column:not(.labels):hover li {
 border: 1px solid #FFF;
}

U can use nth child to remove it from first li if that bothers u.

#pricing-table .pricing-column:not(.labels):hover li:first-of-type {
border: none;
}

Upvotes: 1

Related Questions