CSS opacity transition ignoring overflow:hidden in Chrome/Safari

Question

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!

nashcheez · Accepted Answer · 2017-02-17T12:45:52.967

8

You can have 3 solutions to your problem.

The two solutions that have already been stated as:

Add z-index: 1 to your parent.
Mention border-radius: 50% to the child.

And,

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);
```

edited Feb 17 '17 at 12:45

answered Feb 17 '17 at 12:23

nashcheez

5,067
1
27
53

Ah I didn't realise I needed the translate3d as well, thank you. – Max Henchman Feb 17 '17 at 12:41
This solution didn't work for my problem (iOS 14.6), I had to wrap the child with another div and that div also has overflow hidden. Example: `
` – Caleb Taylor Aug 11 '21 at 05:29

score 1 · Answer 2 · answered Feb 17 '17 at 11:58

1

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

answered Feb 17 '17 at 11:58

Giorgi Parunov

71
2

This wouldn't work for what I'm actually creating as the image inside the parent can be any size meaning it wouldn't work on very wide/tall images. thanks though – Max Henchman Feb 17 '17 at 12:42
and what if you use image in background with `background-size:cover` – Giorgi Parunov Feb 18 '17 at 13:26

score 1 · Answer 3 · edited May 23 '17 at 12:09

1

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).

edited May 23 '17 at 12:09

Community

1
1

answered Feb 17 '17 at 12:08

RompePC

815
1
8
17

I honestly had searched multiple variants of your search with no luck... think i'm not so good at googling :) thanks! – Max Henchman Feb 17 '17 at 12:43

CSS opacity transition ignoring overflow:hidden in Chrome/Safari

3 Answers3