iPhone 6 - position: fixed - not loading until stop scrolling

Question

There are a lot of posts on this site that I have read but nothing is working for me and I'm not sure why.

I'm trying to make a menu that "sticks" to the top of the page as you scroll past it and vice versa (stops sticking when you scroll back up)

Javascript

 $(document).ready(function(){
      var top = $('#FloatingMenu').offset().top - parseFloat($('#FloatingMenu').css('marginTop').replace(/auto/,100))
      document.addEventListener("scroll",Scroll,false);
      document.addEventListener("gesturechange",Scroll,false);
      function Scroll() {
           var y = $(this).scrollTop();
           if (y >= top) {
               $('#FloatingMenu').addClass('fixed');
           } else {
               $('#FloatingMenu').removeClass('fixed');
      }

CSS

 #FloatingMenu.fixed {
     position: fixed;
     top: 0;
     left: 0;
     z-index: 1;
     width: 100%;
     background-color: black;
     color: red;
  }
  #FloatingMenu {
     background-color: red;
     color: black;
     width: 100%;
     text-align: center;
  }

I've tried doing repainting, i've tried stopping the "inertia" scrolling (which I can't get to stop on Chrome on iOS) Either way, everything I've tried has the same results. Works perfectly in a PC or on a Android, but on an iPhone, the menu will not repaint and be "stuck" at the top until the scrolling stops AND the finger is removed from the screen.

Is there a fix for this? Everything I'm reading suggests that there is but notn a single solution has changed anything for me.

The strange thing is, if your scrolling back up (the menu is already stuck at the top) and you scroll past it, it auto un-sticks (even while scrolling) and works fine.

The only time its a problem is when its "repainting" the "fixed" menu.

I hope there is a solution. Everything suggests that after iOS 8 it was fixed (and i'm testing on 10+) but It wont show the menu while scrolling until you stop and let go. Tested on an iPhone 6 and and iPad Air 2. safari and chrome, same results across the board.

Answer 1

I think I solved this question.
It's pretty funny.
Just add to style transform

transform: scaleX(1);

Or

transform: translateX(0);

And it's all

.fixedSidebar{
    position: fixed;
    right:0;
    border:1px solid gray;
    height:100vh;
    width:17%;
    max-width:70px;
    transform: scaleX(1);
}