Compatible Qt5.15 shader codes with Qt 6.6

Question

I've got shader codes that are compatible with Qt 5.15. I'm attempting to convert them for use in Qt 6.6. However, after the conversion, the shaders don't seem to work as expected, and there's no visible output.

The shader was converted to a .qsb (MainShader.frag.qsb) file using QShaderTool and integrated as a resource in QML.

MainShader.frag used in Qt 5.15:

 uniform lowp float qt_Opacity;
 uniform lowp vec4 editColor;
 float interval = 12.0;
 float a = step(mod(gl_FragCoord.x + gl_FragCoord.y, interval) / (interval - 1.0), 0.5);
 void main() {
     gl_FragColor = editColor * a;
 }

MainShader.frag used in Qt 6.6:

#version 440
layout(location = 0) in vec2 qt_TexCoord0;
layout(location = 0) out vec4 fragColor;

layout(std140, binding = 0) uniform buf {
   mat4 qt_Matrix;
   float qt_Opacity;
};


void main(void)
{
   float interval = 12.0;
   float a = step(mod(qt_TexCoord0.x + qt_TexCoord0.y, interval) / (interval - 1.0), 0.5);
   fragColor = fragColor * a;
}

Test.qml :

import QtQuick.Controls
import Qt5Compat.GraphicalEffects
import QtWebEngine
import QtQml

Rectangle {
    id: root

    property bool editMode: false
    property string editModeName: ""
    property string url: ""
    property int borderWidth: 20
    property color editColor: "yellow"
    property color editTextColor: "black"
    property bool isVisible: true


   visible: isVisible
   anchors.fill: parent
   color: "transparent"


    //! WebEngineView to load url
    WebEngineView {
        id: web
        anchors.fill: parent
        anchors.margins: root.borderWidth
        backgroundColor: "transparent"
        url: "url"
    }


    //! Manage Edit mode
    Rectangle {
        id: editModeContent
        z: web.z + 1
        visible: root.editMode
        anchors.fill: parent
        color: "transparent"

        Loader {
            id: loader
            active: true
            anchors.fill: parent
            sourceComponent: border
        }

        Component {
            id: border
            Item {
                ShaderEffect {
                    property color editColor: root.editColor

                    id: borderFill
                    anchors.fill: parent
                    visible: true
                    fragmentShader: "qrc:/qml/MainShader.frag.qsb"

                }

                Rectangle {
                    id: mask
                    border.width: root.borderWidth
                    anchors.fill: parent
                    color: 'transparent'
                    visible: false
                }

                OpacityMask {
                    id: opM
                    anchors.fill: parent
                    source: borderFill
                    maskSource: mask
                }
            }
        }

        Rectangle {
            color: root.editColor
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            width: editModeName.width + 40
            radius: 5
            height: root.borderWidth
        }

        Text {
            id: editModeName
            height: root.borderWidth
            color: root.editTextColor
            anchors.top: parent.top
            anchors.horizontalCenter: parent.horizontalCenter
            font.family: "Helvetica"
            font.pointSize: 12
            text: root.editModeName
        }
    }
} 

Expected result: