the issue is not present in the mobile Firefox browser

did not understand your issue, can you elaborate more

did not understand your issue, can you elaborate more

the background image of the default banner is set with background-size: cover;
This works fine for the PC (also in the developer mode emulating mobile resolutions), however, there is an apparent rendering issue in mobile devices (check on several Android smartphones, on IOS the issue is different). I guess it is also related to background-attachment: fixed;.

The background image changes its size/scale while scrolling. On the screenshots above note the background image -- it is bigger in the 2nd screenshot. The changes are stepped and abrupt.

The issue can be observed on the Cassiopeia demo website. The banner is rendered with no problem with the Firefox browser. my quick fix was to use a different style for mobile browsers except Firefox using media query, although it of course removes the parallax effect:
@media (max-width: 576px) { @supports not (-moz-appearance: none) { /* Styles for all mobile browsers except Mozilla */ .container-banner .banner-overlay { height: 50vh !important; background-attachment: scroll; } } }

it has been also discussed here ~1 year ago: https://forum.joomla.org/viewtopic.php?t=993980

did not understand your issue, can you elaborate more
here is a video
Screen_Recording_20230526_134923_Chrome.webm