Scrollbar in a ScrollView is drawn wrong

import QtQuick 2.0
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1
import QtQuick.Controls.Styles 1.1

Rectangle {
    width: 480
    height: 340

    Rectangle {
        color:"#424242"
        anchors.fill: parent
    }
    Timer {
        interval: 500; running: true; repeat: false
        function getRandomInt() {
            return Math.floor(Math.random() * (50));
        }
        onTriggered: {
            console.log("Populating Message model");
            var today = new Date();
            for (var i = 0; i <15; i++) {
                var obj = new Object();
                obj["sender"] = "Message Sender";
                obj["timestamp"] = today.toLocaleDateString();
                var bodyTxt = new String();
                bodyTxt = bodyTxt.concat(" Text ");
                var txtCount = getRandomInt();
                for (var j = 1; j <= txtCount ; j++) {
                    bodyTxt = bodyTxt.concat("Message body. ");
                }
                obj["body"] = bodyTxt;
                obj["count"] = txtCount;
                messageModel.append(obj);
            }
            messagesList.positionViewAtEnd();
        }
    }


    SplitView {
        anchors.fill: parent
        orientation: Qt.Vertical
        ScrollView {
            id:msgScrollView
            Layout.fillWidth: true
            Layout.fillHeight: true
            style: ScrollViewStyle {
                transientScrollBars: true
            }
            ListView {
                clip: true
                model: messageModel
                id:messagesList
                delegate: messageDelegate
            }
        }

    }
    ListModel {
        id: messageModel
    }
    Component {
        id: messageDelegate
        Item {
            id: root
            width: parent.width
            height: 10+senderText.height + 10 + messageText.height + 20
            property bool isIncoming: true
            property int leftSpacer: 30
            property int rightSpacer: 100

            Text {
                id: senderText
                color: "white"
                style: Text.Raised
                font.pointSize: 12
                anchors.left: parent.left
                anchors.leftMargin: leftSpacer
                anchors.top: parent.top
                anchors.topMargin: 10
                text:sender
            }

            Text {
                id: messageDateText
                color: "#949494"
                font.pointSize: 12
                anchors.left: senderText.right
                anchors.leftMargin: 10
                anchors.verticalCenter: senderText.verticalCenter
                text:timestamp
            }
            Text {
                id: messageText
                color: "#aeaeae"
                font.pointSize: 12
                wrapMode: Text.Wrap
                clip:true
                anchors.top: senderText.bottom
                anchors.topMargin: 10
                anchors.left: parent.left
                anchors.leftMargin: leftSpacer
                anchors.right: parent.right
                anchors.rightMargin: rightSpacer
                text:body+count
            }
            Rectangle {
                id:topLine1
                anchors.left: parent.left
                anchors.leftMargin: leftSpacer
                anchors.right: parent.right
                anchors.rightMargin: rightSpacer
                anchors.top: parent.top
                height: 1
                color: "#646465"
            }
            Rectangle {
                id:topLine2
                anchors.left: parent.left
                anchors.leftMargin: leftSpacer
                anchors.right: parent.right
                anchors.rightMargin: rightSpacer
                anchors.top: topLine1.bottom
                height: 1
                color: "#1c1c1d"
            }
        }
    }
}