Как использовать @media с @supports

Question

После нескольких месяцев поиска я наконец нашел хак для Firefox, как показано ниже:

@supports(max-width: 768px) 
and (-moz- 
appearance:meterbar)
{.parallax-window 
{background-image: 
url("http://4309.co.uk/wp-  
content/uploads/2020/ 
01/Screenshot_2020012
5_205147.jpg") !important; 
background-repeat: repeat; 
}} 

Определяющий код, @supports(max-width: 768px) and (-moz-appearance:meterbar) отлично работает на мобильных устройствах (как я и написал), просто в десктопе есть сбой.

Часть изображения мобильного представления отображается в представлении рабочего стола, несмотря на то, что оно ограничено только просмотром с мобильного устройства через «(max-width: 768px)», как показано выше.

Большая часть страницы на рабочем столе черная, как хотелось бы, и сделана с помощью элемента .parallax-window; просто небольшой раздел вверху имеет мобильное изображение. Не уверен, как это происходит.

Я пробовал:

@supports(min-width: 768px) 
and (-moz- 
appearance:meterbar) 
{.parallax-window 
{background-color: black;}}

И

@supports(min-width: 768px) 
and (-moz- 
appearance:meterbar) 
{.parallax-window 
{background-color: black;}}

@supports(min-width: 768px) 
and (-moz- 
appearance:meterbar) 
{.parallax-window 
{background-color: black;}}

@supports(min-width: 768px) 
and (-moz- 
appearance:meterbar) {body, 
html {background-color: 
black;}}

Все безрезультатно.

Html

<div id="content" 
class="main-container">
<section class="content- 
area  pt0 ">
<div id="main" class="" 
role="main">
<div 
id="shapely_home_parallax- 
2" class="widget 
shapely_home_parallax">      
<section class="cover 
fullscreen image-bg">
<div class="parallax-window 
fullscreen" data- 
parallax="scroll" data- 
image- 
src="http://4309.co.uk/wp-  
content/uploads
/2019/08/download-2.png" 
data-ios-fix="true" data- 
over-scroll-fix="true" 
data-android-fix="true">
<div class="align- 
transform">
<div class="row">
<div class="top-parallax- 
section">

здесь