Bug found in iOS Safari causing rendering issues during transition from overflow:hidden

Question

Bug found in iOS Safari causing rendering issues during transition from overflow:hidden

Here is a demonstration of the bug I have identified: http://codepen.io/benfrain/full/PZjpxr

In iOS Safari, a peculiar issue occurs when transitioning an element from outside an overflow:hidden container back into it. The element only displays after the transition completes.

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

.item {
  transition: transform 1s;
}

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

This behavior is most noticeable on iOS 9, but even in iOS 9.2 it persists after multiple runs of the transition. It seems to affect elements containing text specifically. On the other hand, the empty red item transitions correctly.

Are there any alternative solutions that do not involve using margin-top for vertical movement?

ios css overflow css-transitions

Answer 1

Answer №1

TLDR Remember to add position: fixed to the element with hidden overflow

Check out this CodePen example for reference

Spent hours grappling with an issue related to overflow: hidden. It's a challenge navigating through numerous unhelpful responses when searching for solutions, but surprisingly stumbled upon this gem of a post.

It's strange how such a common problem isn't widely discussed and documented. Isn't it odd?

I recalled encountering a similar problem in the past where mobile browsers tend to ignore overflow settings on body and html with specific viewport meta tags. The workaround involves using an inner wrapper element with overflow set on it along with applying fixed positioning to fully address the issue. (the reason behind this remains a mystery)

The viewport meta tags aren't the cause in this scenario; rather, it's the magic touch of position: fixed that does the trick. Make sure to apply it to the element with overflow hidden setting, whether it's the immediate parent or further up the hierarchy.

This might explain why many users haven't encountered this glitch frequently. Those who have attempted transitioning a sidebar navigation would encounter the body overflow issue mentioned earlier and probably had already applied position: fixed to a parent container unintentionally resolving this issue as well.

Take note that utilizing overflow/fixed positioning on an inner element could result in content flow disruptions leading to other complications.

Answer 2

TLDR Remember to add position: fixed to the element with hidden overflow

Check out this CodePen example for reference

Spent hours grappling with an issue related to overflow: hidden. It's a challenge navigating through numerous unhelpful responses when searching for solutions, but surprisingly stumbled upon this gem of a post.

It's strange how such a common problem isn't widely discussed and documented. Isn't it odd?

I recalled encountering a similar problem in the past where mobile browsers tend to ignore overflow settings on body and html with specific viewport meta tags. The workaround involves using an inner wrapper element with overflow set on it along with applying fixed positioning to fully address the issue. (the reason behind this remains a mystery)

The viewport meta tags aren't the cause in this scenario; rather, it's the magic touch of position: fixed that does the trick. Make sure to apply it to the element with overflow hidden setting, whether it's the immediate parent or further up the hierarchy.

This might explain why many users haven't encountered this glitch frequently. Those who have attempted transitioning a sidebar navigation would encounter the body overflow issue mentioned earlier and probably had already applied position: fixed to a parent container unintentionally resolving this issue as well.

Take note that utilizing overflow/fixed positioning on an inner element could result in content flow disruptions leading to other complications.

Answer 3

Answer №2

If you're still on the lookout for a solution, make sure to add the will-change style in both your .testItem 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;
  }
}

Initially, it appeared that only the .testItem class needed this style, but it turns out that the .goThing class requires it as well for proper functionality on iOS devices. The reason behind this requirement remains unclear. Testing was performed on an iPad Pro running iOS 9.2 with successful results.

UPDATE:

Following feedback, it appears that the initial approach did not yield the desired outcome. However, using animations instead of transitions proved effective. One potential downside is the ability to click the button before the animation completion (though this can be managed based on specific requirements).

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

Answer 4

If you're still on the lookout for a solution, make sure to add the will-change style in both your .testItem 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;
  }
}

Initially, it appeared that only the .testItem class needed this style, but it turns out that the .goThing class requires it as well for proper functionality on iOS devices. The reason behind this requirement remains unclear. Testing was performed on an iPad Pro running iOS 9.2 with successful results.

UPDATE:

Following feedback, it appears that the initial approach did not yield the desired outcome. However, using animations instead of transitions proved effective. One potential downside is the ability to click the button before the animation completion (though this can be managed based on specific requirements).

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

Answer 5

Answer №3

Perhaps the solution provided below can resolve the issue:

Issue with CSS3 scale transform and overflow:hidden on Safari

According to the suggestion, consider using mask-image or clip-path as alternatives to replace overflow:hidden

Answer 6

Perhaps the solution provided below can resolve the issue:

Issue with CSS3 scale transform and overflow:hidden on Safari

According to the suggestion, consider using mask-image or clip-path as alternatives to replace overflow:hidden

Bug found in iOS Safari causing rendering issues during transition from overflow:hidden

Answer №1

Answer №2

Answer №3

Similar questions

Employ a category from a custom iOS framework

Animating gradient transitions vertically and horizontally

Separating stylesheets, head, and other elements in a curl response

The Three.js IEWebGL Plugin

What are the steps involved in creating a radial menu design?

Unable to conceal the scrollbar while keeping the div scrollable

Using the jQuery method `fadeToggle` to handle the functionality of multiple buttons toggling hidden text

The AVAssetWriter records a video featuring nothing but a blank screen

Update the color of navigation items to reflect their active status

A guide to integrating Tailwind UI animations into pure HTML and JavaScript

The jQuery bxSlider is failing to function properly in a responsive design

Internet Explorer is not honoring the max-width property when used in a select tag

Stopping WKWebView from automatically underlining plain text as clickable URLs

Creating a full width and height slider with a header menu that is responsive to all device screen sizes

Xcode: I'm perplexed by the blue selection line in my code. How can I remove it?

Apply CSS styling (or class) to each element of a React array of objects within a Component

Angular text input with customizable placeholder text and embedded icon

What is the best method for adjusting height in MaterialUI components?

Buttons are misaligned and do not align on a straight line

what is the process of configuring attributes within an NSAttributedString on iOS?