Modal header disappearing on iOS 8

[asnoba]

Hi,

I've run into a bug regarding the modal overlay, which is disappearing on iOS 8 when triggered. The issue can be seen when testing the Movies Finder example on Chrome or Safari on iOS 8 (iPhone 5).

Any ideas to how this could be solved?

Best regards,
Asger

[itomaldonado]

Same is happening to me, both the header and the navigation bar at the bottom disappear when a modal is called.

If I add a 'textarea' (or a contenteditable="true" 'div') to the modal's .content 'div' and add enough lines (pressing enter a few times) so the .content 'div' grows enough to require scrolling the header and footer bars re-appear. But as soon as I delete some of the lines from the editable area the header and footer disappear again.

This happens only on iOS8 (both iPhone 5 and 5S).

[asnoba]

I seems to work if I add 1px to the z-axis in the translate3d property for both the modal and active modal transform mixin similar to this Stack Overflow issue: http://stackoverflow.com/questions/20832531/mobile-safari-positionfixed-z-index-glitch-when-scrolling

.modal {
  position: fixed;
  top: 0;
  z-index: 11;
  width: 100%;
  min-height: 100%;
  overflow: hidden;
  background-color: #fff;
  opacity: 0;
  -webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
     -moz-transition: -moz-transform .25s, opacity 1ms .25s;
          transition: transform .25s, opacity 1ms .25s;
  @include transform(translate3d(0, 100%, 1px));

  // Active modal
  &.active {
    height: 100%;
    opacity: 1;
    -webkit-transition: -webkit-transform .25s;
       -moz-transition: -moz-transform .25s;
            transition: transform .25s;
    @include transform(translate3d(0, 0, 1px));
  }
}

[itomaldonado]

Wow, it did seem to work with that. Thanks! I wonder why though, maybe since these are fixed items they need to be brought up (on the z-axis)? (forgot to add +1)

Anyway, mine seemed a bit different, so I am posting it here.

.modal {
position: fixed;
top: 0;
z-index: 11;
width: 100%;
min-height: 100%;
overflow: hidden;
background-color: #fff;
opacity: 0;
-webkit-transition: -webkit-transform .25s, opacity 1ms .25s;
-moz-transition: -moz-transform .25s, opacity 1ms .25s;
transition: transform .25s, opacity 1ms .25s;
-webkit-transform: translate3d(0, 100%, 1px);
-ms-transform: translate3d(0, 100%, 1px);
transform: translate3d(0, 100%, 1px);
}
.modal.active {
height: 100%;
opacity: 1;
-webkit-transition: -webkit-transform .25s;
-moz-transition: -moz-transform .25s;
transition: transform .25s;
-webkit-transform: translate3d(0, 0, 1px);
-ms-transform: translate3d(0, 0, 1px);
transform: translate3d(0, 0, 1px);
}

[JayHoltslander]

Ugh. Spent about an hour trying to figure this out before stumbling across this. Oh well. Glad it was figured it out.

I did notice that it seems to happen only when the modal's content area contains something clickable. Whether it be a btn or a table-view. (Not sure if that sheds light on anything or not.)

[fdambrosio]

I can't fix this problem with your suggestion. I have no problem with the same page on iOS 7 but with iOS 8 all header is white, without icons and more. What's the right fix?

[ashansky]

This fix (from the linked salesforce mobile SDK) worked better for me:

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

Though I ended up adding these styles as well.

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

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

[fdambrosio]

Thank you ashansky!!! This fix works!! 👍 -)

[bj-mcduck]

I seem to be having similar issues on various content parts of the page when using snapjs as well.
I think my issue #699, and this one, may be somewhat related.

[edwardm]

ashansky's fix worked for me, thanks!