Strange ghosting effects on ios with beta 3

[vincentjames501]

After migrating from beta 1 -> beta 3, it looks like all of my iOS 7 devices are faced with this issue. Looks like this person may have experienced it as well? (http://forum.ionicframework.com/t/1-0-0-beta-3-americium-released/3590/21#)

Code snippet (I removed a bunch of stuff but this is the basic layout):

<ion-view title="Details">
    <ion-content class="has-header" >
        <div id="confirmation-wrapper" class="card">
        </div>

        <div class="list card">

            <div class="item item-avatar notification-details">
                <img id="contact-image" ng-src="...">

                <h2 class="notification-initiator-name">{{notification.initiator.name}}</h2>

                <p class="notification-subject">{{notification.subject}}</p>
            </div>

            <div class="item item-body">

                <img id="notification-image">

                <p>
                    {{notification.body}}
                </p>

                <p>
                    <a class="subdued">Sent on {{notification.createdAt | date: 'medium'}}</a>
                </p>
            </div>

        </div>
    </ion-content>
</ion-view>

[vincentjames501]

I can confirm that beta 2 does not have this issue.

[ashconnell]

I think i found a fix for this.

My Scenario:
I have a view in an ion-content that on first render is fine, but if i switch view (using an ion-side-menus) and come back, pulling the scroller down reveals a duplicate of the first element. It seems to be ONLY the first child element of the ion-content that the ghost is created.

How It Happens:
This ghost element does not have a dom reference, it looks to be a webkit engine issue related to transforms.

The Fix:
Adding a z-index to the .scroll-content div of the ion-content directive seems to fix it. In my case z-index:10 isn't causing overlapping issues but i haven't looked through the ionic sass so im not 100% sure it doesnt conflict.

@vincentjames501 can you confirm this works, and if so, should be an easy fix for the sexy drifty team.

[ashconnell]

Now it looks like the z-index actually makes the element completely dissapear the second time you open that view.

I narrowed it down to text-align:center as the culprit (which it looks like @vincentjames501 is also using on his ghost element).

z-index is still required to remove the ghost, but this explains how to accurately produce the problem:

1. Don't have z-index on .scroll-content
2. Make your first element inside the ion-content use text-align:center
3. Ghosts are real

This has to be one of the weirdest things i've ever seen.

[vincentjames501]

I'll give it a whirl tomorrow morning. Thanks for the feedback!

On May 5, 2014, at 9:57 PM, Ash Connell [email protected] wrote:

I think i found a fix for this.

My Scenario:
I have a view in an ion-content that on first render is fine, but if i switch view (using an ion-side-menus) and come back, pulling the scroller down reveals a duplicate of the first element. It seems to be ONLY the first child element of the ion-content that the ghost is created.

How It Happens:
This ghost element does not have a dom reference, it looks to be a webkit engine issue related to transforms.

The Fix:
Adding a z-index to the .scroll-content div of the ion-content directive seems to fix it. In my case z-index:10 isn't causing overlapping issues but i haven't looked through the ionic sass so im not 100% sure it doesnt conflict.

@vincentjames501 can you confirm this works, and if so, should be an easy fix.

—
Reply to this email directly or view it on GitHub.

[adamdbradley]

In my tests I was able to fix it by removing overflow:hidden from .pane and .view. Would you be able to test the latest change before I close this?
64f0030b99ba

[ashconnell]

Looks like that works. How did you figure this out if you don't mind me asking?

[adamdbradley]

Actually since it was fine in beta2 but broke in beta3, i just compared the actual release css files, then commented out the changes until it worked again (nothing simple debugging, but it worked). Thanks for helping to figure this out!

[csvendsen]

I had the same strange issue with ghosting using
ion-content has-bouncing="true" scrollbar-y="true" class="ionic-tag" zooming="true"
I fixed it by adding
.scroll-content {
position: fixed;
}