Custom seekbar has a gap between thumb and progress

Question

I have created my own custom styling for a vertical SeekBar, however there is a small gap between the thumb and the progress part of the SeekBar as shown here: https://i.stack.imgur.com/FPhsj.png

Even more interesting though is that the further you drag the thumb the smaller the gap becomes until about 50% - 60% full when it disappears: https://i.stack.imgur.com/oEfQD.png

Everything is done using xml and shapes, no pngs. Any idea what could be causing this? I've tried messing around with the different paddings and thumb offset but I obviously must be missing something.

Below is the xml for the SeekBar, the Progress Drawable and the Thumb Drawable.

<SeekBar
        android:layout_width="320dp"
        android:layout_height="wrap_content"
        android:background="@drawable/volume_shading"
        android:id="@+id/volume"
        android:rotation="270"
        android:progressDrawable="@drawable/blue_slider"
        android:paddingTop="20dp"
        android:paddingBottom="20dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:thumb="@drawable/thumb"
        android:thumbOffset="0dp"
        android:layout_marginTop="220dp"
        android:layout_marginRight="-100dp"
        android:layout_alignParentRight="true"/>

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background"
          android:drawable="@drawable/grey_bar" />

    <item android:id="@android:id/progress">
    <scale android:scaleWidth="100%"
           android:drawable="@drawable/blue_bar" />
    </item>

</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
           android:shape="rectangle">
    <solid android:color="@android:color/white" />
    <size  android:width="8dp"
           android:height="40dp" />
    <corners android:radius="4dp" />
</shape>