QML WebEngine Webkit Scrollbar is not visible when the bar is injected with User Scripts on EGLFS Platform Plugin

Hi, I am trying to implement a touch-screen safe version of quicknanobrowser in which I want to have a scroll bar that is wide in width. I have created a webenginescript for this regard and I successfully am able to display my custom scrollbar on a Linux PC with X11 backend.

However, the same code does not work for the Linux/EGLFS Platform Plugin on Raspberry Pi 4. There is also no debug information displayed related to it. I am using Qt 5.13.0 on both devices.

The code on top of quicknanobrowser example is as follows:

main.qml file
WebEngineView
...

userScripts: [
WebEngineScript

{ injectionPoint: WebEngineScript.DocumentReady worldId: WebEngineScript.MainWorld name: "SliderBarFix" sourceUrl: "qrc:///resources/scripts/slidebar-fix.js" }

]

 

slidebar-fix.js

(function() {
css = document.createElement('style');
css.type = 'text/css';
css.id = 'SliderBarFix';
css.innerText = ' \
::-webkit-scrollbar

{ \ width: 40px; \ background: #ccc; \ border-top:1px solid gray; \ border-bottom:1px solid gray; \ }

\
::-webkit-scrollbar-track { \
} \
::-webkit-scrollbar-thumb

{ \ background: #42f5dd; \ border-top:1px solid gray; \ border-bottom:1px solid gray; \ }

\
::-webkit-scrollbar-corner

{ \ background: #ccc; \ }

\
::-webkit-scrollbar-button

{ \ background: #aaa; \ height:40px; \ }

'; document.head.appendChild(css); }

)()

I would like to get expert help regarding this issue.  Maybe webkit features are not activated with eglfs plugin? Any suggestion will help me greatly. Thank you in advance.