QML - Dial not appearing correctly in StackLayout for Fusion style

Question

For context, I will be making my own QML Controls style (for which I will be using the included Fusion style as a starting point), and for this I am making a Controls gallery of sorts.

In this gallery I have multiple tabs which are used to select between Pages in a StackLayout. Curiously, when I put a Dial in the second tab, I noticed that it wasn't displaying correctly at all.

It is still able to turn though.

When I place the Dial in the first tab, it does render correctly.

Curiously, for many styles (Material shown below) the dial does display correctly.

The following is the QML code used:

Window {
    id: root
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    
    ColumnLayout {
        anchors.fill: parent 
        spacing: 0
        
        TabBar {
           id: tabBar
           Layout.fillHeight: true; Layout.fillWidth: true 
           Layout.minimumHeight: tab1.height
           Layout.maximumHeight: tab1.height
           
           TabButton {
               id: tab1
               text: "Tab1"
               width: implicitWidth
           }
           TabButton {
               text: "Tab2"
               width: implicitWidth
           }
        }

        StackLayout {
            currentIndex: tabBar.currentIndex
            Layout.fillHeight: true; Layout.fillWidth: true 
            
            Page {
                anchors.fill: parent 
                Dial {
                    inputMode: "Circular"
                }
            }
            Page {
                anchors.fill: parent
                Dial {
                    inputMode: "Circular"
                }
            }
        }
    }
}

What is causing this discrepancy and how can I fix it?