Fixed element in -webkit-overflow-scroll is not actually fixed with iOS safari

Question

I have a fixed footer with scroll and fixed element inside the footer like bellow.

.footer {
  position: fixed;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

.footer .fixed {
  position: fixed;
}

When I scroll the footer, the fixed element inside the footer bounces.

Here is my jsbin. Please access with your iPhone/iPad.

https://output.jsbin.com/wiyewi

Scrolling the bottom red area makes blue square element bounce. With iPad, it moves really big.

As you can see in the input, the element's DOM position ($('blue').position().top) does not change at all. Only the 'visual element' is moving.

Does anyone know how to fix this? I know there are some similar question but none of them are answered...

-webkit-overflow-scrolling touch doesnt work with fixed elements

Position fixed and -webkit-overflow-scrolling: touch;