Background image with fixed position jitters when scrolling

Ionic Framework ionic-v3
1

Hi,

I have been trying hard and long to get the following scenario working on a iOS (haven’t tried Android yet), but I don’t get a satisfying result. I get however the expected result on the browser.

The requirement is to have a background image at the top of the page that is scaled to a predefined size (not the whole screen) and has a fixed position at the top, i.e. it should not scroll with the content. The scrollable content should basically move over it when scrolling down.

The template looks like this:

<ion-content>
   <div class="background-image"></div>
   <!-- Move the scrollable content below the background image. -->
   <ion-list style="margin-top: 150px">
      <!-- Fill in items to create scroll overflow. -->
      <ion-item>Placeholder</ion-item>
      <ion-item>Placeholder</ion-item>
      <ion-item>Placeholder</ion-item>
   </ion-list>
</ion-content>

And the style sheet looks like this:

.background-image {
    // Define the size of the image container. 
    width: 100%;
    height: 150px;
    position: fixed;  // This would make it fixed and not scrollable,
                      // however at least on iOS it leads to jittering effects when scrolling the content.

    // Scale and center the image nicely.
    background-image: url('../assets/img/sampleImage.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

In the browser this works fine, the image is fixed to the top of the page and the scrollable content moves over it when scrolling down.
On the iPhone the image is positioned correctly and doesn’t scroll with the content, however the image jitters up and down while scrolling up / down.

If I remove ‘position: fixed’ the image just scrolls with the content.

Note: I have also tried to make the background image part of the ion-content tag, but the problem is that I want to set the background-size attribute to the wanted size (100%, 150px; not fullscreen) and also scale it respecting the aspect ratio as when using ‘cover’.

Template for this option:

<ion-content class="background-image">
   <!-- Move the scrollable content below the background image. -->
   <ion-list style="margin-top: 150px">
      <!-- Fill in items to create scroll overflow. -->
      <ion-item>Placeholder</ion-item>
      <ion-item>Placeholder</ion-item>
      <ion-item>Placeholder</ion-item>
   </ion-list>
</ion-content>

Style sheet:

.background-image {
    background-image: url('../assets/img/sampleImage.jpg');
    
    // The background size has to be 100% and 150px, but also 'cover' preserving
    // the aspect ratio, however I didn't manage to find a way to set both.
    background-size: 100% 150px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Does anybody else experience the jittering in the first option? If so, is there a way to achieve the expected result with the second option, or any other option? Thanks for any hints.

Ionic info:

Ionic:

ionic (Ionic CLI) : 4.3.1
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.2.0

Cordova:

cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.1
Cordova Plugins : cordova-plugin-ionic-webview 1.2.1, (and 17 other plugins)

System:

NodeJS : v8.11.3
npm : 6.4.1
OS : Mac OS X High Sierra