Fixed element disappearing on fast scroll

[Paul Medawar]

Hi,

I have a fixed grid at the top of the page, with a white back ground and an image within it.

I have the following css assigned to the grid

.fixedtop {
position: fixed;
top: 0;
left:0;
right:0;
border-width: 0;
z-index:101;
}

my issue is that when I scroll down the page quickly the grid and image disappear until the scrolling stops.

I found the following css works in to stop the image from disappearing

.Element-header {
transform: translate3d(0,0,0);
}

but applying the same to the grid, doesn't stop it from disappearing on fast scroll.

How can I make sure the fixed grid doesn't disappear on scroll?

[Serhii Kulibaba]

Hello Paul,

It seems an issue of your custom page structure/CSS, anyway we will try to help you.

Could you clarify, where exactly do you have this issue, on the real device or on the browser preview?

[Paul Medawar]

Hi serhii,

the browser preview is fine. It's only on the device, both through the appery tester and when the app is installed on the device.

[Serhii Kulibaba]

Please share (https://docs.appery.io/docs/teams-sha...) your app with a href="mailto:support@appery.io" rel="nofollow"support@appery.io/a and provide us with the following information:

1) App name
2) Test credentials if login functionality is implemented in your app
3) Detailed steps to reproduce the issue

What device name / OS version do you use there?

[Paul Medawar]

Hi Serhii,

app is called "SMO" and is shared.

login "iggy"
pass "iggy"

if you scroll up relatively quickly on any of the pages, you will see that the fixed grid at the top disappears until the scrolling stops, then it reappears. It should remain fixed all the time.

iPhone 8 & iOS 11.2.1

[Serhii Kulibaba]

This is something outside the scope (https://docs.appery.io/docs/general-s...) of our standard support. Anyway, I'll try to help you.

I see you use the Swiper library. Does it reflect that header somehow? Could you test it without that library?

Also, please check if it helps you:
Set the position:fixed to the Z1_mobilegrid_41_wrapper instead of the mobilegrid_41 itself. Or Add that grid the header to have it fixed on the top