This seems to work for Ionic5 on iphone 6 Plus on iOS 12.4.2

.large_player {
    float: left;
      bottom: 0;
      width: 100%;
      position: fixed;
      background-color: white;
      border-top: black 1px solid;    
      height: 14rem;
      z-index: 100;
      transform: translate3d(0,0,0);
  }

The transform tag makes it work, but it also seems a little clunky in how the scroll works, it is seems to redraw the ‘on top’ element after it’s all moved and sort of resets and makes it jump a little.

Or, you could also use this tag option as well, position: -webkit-sticky;, but then you won’t get, or may run in to trouble with WPA/browser or Android builds while having to do version checking and have multiple CSS tags.

.large_player {
    float: left;
      bottom: 0;
      width: 100%;
      position: -webkit-sticky;
      background-color: white;
      border-top: black 1px solid;    
      height: 14rem;
      z-index: 100; 
  }

I don’t know at what point it was fixed, but later iOS phones work without the transform tag. I don’t know if it’s the iOS version, or the phone.

As most iOS devices are usually on the most recent iOS version, it’s pretty safe with go with a weird work around – such as using the transform tag, rather than building in a quirky detection routine for the sake of less than 1% of users.

Update:

After thinking about this answer further, this is just another way of doing this by platform for ionic5+:

.TS

import {Platform } from '@ionic/angular';

constructor(
public platform: Platform 
) 
{  
    // This next bit is so that the CSS is shown correctly for each platform    

    platform.ready().then(() => {
    if (this.platform.is('android')) {
        console.log("running on Android device!");
        this.css_iOS = false;
    }
    if (this.platform.is('ios')) {
        console.log("running on iOS device!");
        this.css_iOS = true;
    }     
    if (this.platform.is('ipad')) {
        console.log("running on iOS device!");
        this.css_iOS = true;
    }
    });
}
css_iOS: boolean = false;

.HTML

<style *ngIf="css_iOS">
    .small_player {
      position: -webkit-sticky !important;
    }
    .large_player {
      position: -webkit-sticky !important;
    }
    </style>
    
    
    <style>
    .small_player {
    float: left;
      bottom: 0;
      width: 100%;
      position: fixed;
      background-color: white;
      border-top: black 1px solid;    
      height: 4rem;
      z-index: 100;
      /*transform: translate3d(0,0,0);*/
    }
    
    .large_player {
    float: left;
      bottom: 0;
      width: 100%;
      position: fixed;
      background-color: white;
      border-top: black 1px solid;    
      height: 14rem;
      z-index: 100;
      /*transform: translate3d(0,0,0);*/
    }
    </style>