3

I've created a reduction of this bug here: http://codepen.io/benfrain/full/PZjpxr

In iOS Safari, when transitioning an element from outside of an overflow:hidden wrapper back into it, the element only renders when the transition has finished.

.wrapper {
  height: 200px;
  width: 200px;
  overflow: hidden;
}

.item {
  transition: transform 1s;
}

.toggled .item {
    transform: translate3d(0, 300px, 0);
}

This is especially apparent on iOS 9, but when tested on iOS 9.2 it still happens after 4 or 5 runs of the transition. It is also only a problem with elements that have text in them. The empty item on the right (in red) transitions correctly.

Does anyone know any workarounds that don't involve using margin-top to perform the vertical movement?

Improve this question
5
  • does safari still require -webkit- prefixes, maybe? Commented Jan 11, 2016 at 17:04
  • I don't think so, as the transition that sends the div down works fine. I'll add them to the pen so as to rule that out. Commented Jan 11, 2016 at 17:22
  • Have you tried using -webkit-transform-style: preserve-3d; on .item ? Also I would try including the -webkit- variation of each property. Commented Jan 11, 2016 at 18:21
  • Thanks for the idea, I didn't know about that property before. Unfortunately, it just makes the empty div transition as badly as the one with text in that was causing the problem. Commented Jan 12, 2016 at 9:22
  • maybe the answer below will solve your problem: stackoverflow.com/questions/21087979/… Commented Nov 6, 2020 at 10:03

3 Answers 3

Reset to default
3

TLDR Add position: fixed to the element with hidden overflow

https://codepen.io/chasebank/pen/YEzLez

Spent the better part of my day fighting this. It's difficult to research an overflow: hidden bug, since every transition related issue has a hundred backface-visibility "hidden" answers on a thousand different stack "overflow" posts.

But surprisingly, this is the only relevant post I've found. You'd think this would be a well-known and well-documented problem?

I finally remembered a similar issue, where some mobile browsers ignore overflow on body and html, when certain viewport meta tags are used in the head. The solution is to have an inner wrapper element, and set your overflow on that, but it also requires fixed positioning to fully squash the problem. (still don't know why)

The viewport meta tags don't have any effect on this, but position: fixed does. It has to be applied to whichever element has overflow set to hidden, whether it's the direct parent or something higher up the chain.

Which explains why a lot of people aren't encountering this more. If they've tried to transition a sidebar nav, for example, they would have encountered the previously mentioned body overflow problem, and already have a parent wrapper set to position: fixed - inadvertently fixing this issue as well.

Keep in mind if you need overflow/fixed positioning on an inner element, it will be removed from the flow of content, which could lead to other headaches.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

I don't know if you're still looking for an answer for this but you're missing the will-change style both in your .testIem and .goThing classes.

.testItem {
  will-change: transform;
  width: 50%;
  height: 300px;
  background-color: #f90;
  transform: none;
  transition: transform 2s;
  .goThing & {
    transform: translate3d(0, 500px, 0);
    will-change: auto;
  }
}

I thought you only needed it for the .testItem class but it seems you also need it for the .goThing class for it to work properly in iOS. I'm not really sure why though. I tested it in an iPad pro with iOS 9.2 and it works.

UPDATE:

Based on comments, it seems it didn't work. But it works with animations instead of transitions. The only disadvantage is clicking the button before the animation finishes (which can be prevented depending on your needs).

http://codepen.io/Ostos/pen/EWVJqe

Improve this answer

5 Comments

This solution does not seem to work in iOS Safari. Tested on an iPhone 6 with iOS v10 and thru BrowserStack with iOS v9. codepen.io/alexroper/full/PpPqjm
@alexroper I updated my answer. You're right. When I tested it 6 months ago it was working... but it works if you use animations instead of transitions. More complex, but it works.
Yes, I mentioned that in my answer. It depends on your needs. You can remove the click listener and re-add it when the animation ends, or just add another flag that changes with an animationend event. If you absolutely require clicking again before the animation ends, then this is not the best answer.
Oh, and of course. Animating it with javascript is another option. But it's too complex for just a simple thing. In my opinion.
Oh sorry, I didn't see that note mentioned in your answer. I'll delete my comment about the keyframe animations.
0

Maybe the answer below will solve this problem:

Probleme CSS3 scale transform and overflow:hidden on Safari

As it showed, use mask-image or clip-path to replace overflow:hidden

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.