CODEWITHSUNDEEP
cssopacitytransition
Max Henchman
Max Henchman

Reputation: 49

CSS opacity transition ignoring overflow:hidden in Chrome/Safari

Having an issue with CSS transitions ignoring their parents overflow property during the transition in Chrome/Safari.

JS adding an active class to the child:

$('.child').addClass('active');

CSS for the parent/child

.parent {
  position:relative;
  width:250px;
  height:250px;
  background:#000;
  border-radius:250px;
  overflow:hidden;
}

.child {
  opacity:0;
  transition:1s opacity ease-in-out;
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  background:blue;
  width:250px;
  height:250px;

  &.active {
    opacity:1;
  }
}

Here's the fiddle: https://jsfiddle.net/b3ejm7qr/1/

During the transition, the child's content is shown outside of it's parent then disappears on completion.

Have tried adding backface-visibility with no luck.

Been trying to find the same problem but haven't had any luck... Was wondering if this is a known issue in Chrome/Safari and whether there's a fix / workaround?

Thank you!

Upvotes: 3

Views: 1528

Answers (3)

nashcheez
nashcheez

Reputation: 5183

You can have 3 solutions to your problem.

The two solutions that have already been stated as:

  1. Add z-index: 1 to your parent.

  2. Mention border-radius: 50% to the child.

And,

  1. Just add the backface-visibility browser specific properties to your parent, along with the transform: translate3d properties. You have to set the translate3d properties manually due to a bug in the webkit browsers.

    -webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);

Upvotes: 8

RompePC
RompePC

Reputation: 835

I added z-index to both elements, and maybe is what are you looking at. https://jsfiddle.net/b3ejm7qr/2/

If not, looks like is a bug type, as Giorgi says (Google search, first link).

Upvotes: 1

Giorgi Parunov
Giorgi Parunov

Reputation: 71

It can be browser bug . But you can give border-radius: 50% for your child element . After giving radius for child everything will for in all browsers

Upvotes: 1

Related Questions