Display issues iPad using "stick this" sticky command for header & top bar

Hi,

Since I had no other choice as native sticky option of GeneratePress doesn't stick the top bar. I'm using the following CSS to stick top bar & menu. It works great on all devices that I tested except iPad on all browsers.

/* Sticky site header & top bar */

.top-bar {
position: sticky;
z-index: 999;
top: 0;
}

.site-header {
position: sticky;
z-index: 999;
top: 49px; /* height of top bar */
}

/* END sticky site header & top bar */

The following screen shot shows the issue:

Is there a workaround that would make that I can use the native GeneratePress sticky option that will include the top bar and eliminate the display issue on iPad? Keeping in mind that the end result would display everything the same as it is displayed now except on iPad. Any other working solution like adding some simple command to the existing CSS to make it work would be viable.

Please advise on solution.