Argh. I'm struggling with a popover item in Mobile Safari for iOS 7. The popover displays properly in iOS6. However, in iOS 7 it is hidden behind the main content. Adjusting z-index shouldn't be necessary but it doesn't work anyway. Argh!

Is Mobile Safari on iOS 7 the new IE6?

![Topcoat Phonegap 1](http://162.243.35.61/content/images/ios6_screenshot.png)
![Topcoat Phonegap 2](http://162.243.35.61/content/images/ios7_screenshot.png)

UPDATE:

I "solved" this. Sort of. It should not have required this type of a fix, but this does work. Here is the original code (note - using AngularJS directive for the modal).

<div ng-repeat="player in players" controller-toggle-player="togglePlayer();">
    <div player-button player-details="player"></div>
</div>

As you see in the code above, the directive for the "edit-player" modal is ABOVE the code for the rest of the page. All works fine in Safari, Chrome, FF, iOS 6. To get this to work in iOS7, I had to move the "edit-player" directive to AFTER the rest of the code such as:

<div ng-repeat="player in players" controller-toggle-player="togglePlayer();">
    <div player-button player-details="player"></div>
</div>

<div edit-player></div>

I don't understand the reason for the change. I would say this is a rendering bug in iOS 7 Mobile Safari.