iPad mini position fixed stays relative to parent

I've a bar .buttons that I want to be at the bottom of the page fixed. The parent is a scrollable div.

<div class="scrollable">
 <div class="content"></div>
 <div class="buttons"></div>
</div>

The div .buttons is fixed so it should ignore the parent. This works in everything (all browsers, all devices) except for the ipad mini (normal ipad works fine).

css:

.buttons {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: $bottom-bar-color;
    padding: 10px 0;
    z-index: 999;
    text-align: center;

    @media (min-width: $screen-sm-min) {
        padding: 10px 0;
    }

    .btn {
        min-width: 100px;
        text-align: center;

        @media(max-width: $screen-xs) {
            min-width: 150px;
        }
    }
}