Search code examples
iostwitter-bootstrapcssios8ratchet

Ratchet Modal bug on iOS 8

I have an app on the store which is built using Ratchet framework. It used to work fine, until iOS 8 was released. Now when I test it on iOS 8, title bars for modals won't appear. All the controls like Close, Back buttons on the bar work when I click, but the bar and the controls on it are not visible. This happens only on iOS 8, works fine on iOS 7 and older versions.

To reproduce this bug, please open this sample app http://goratchet.com/examples/app-android-notes in Safari on an iOS 8 device or simulator, and then click on New note button to open a modal.

I've noticed while debugging it in Safari's web inspector that if I move the bar <header>...</header> element of the modal to somewhere else and then bring it back to its original position, it appears. Or sometimes, changing its display property from block to none and then back to block works. Or sometimes if I scroll the page.

Any solution will be highly appreciated

enter image description here

Solution

  • Seems there is an issue with position: fixed in Safari as discussed in this SO question: Mobile safari position:fixed z-index glitch when scrolling

    You can fix it by adding this rule to your CSS

    header.bar.bar-nav {
  -webkit-transform: translateZ(0);
}

    You can track the issue on Ratchet's Github repository here - https://github.com/twbs/ratchet/issues/679