Как использовать в CSS background: -moz-element(#css-source)?

Question

[Виктор]

Подскажите, необходимо применить размытие меню.
Использую backdrop-filter, но он не везде работает.
Там где не работает хочу применить вот этот эффект.
Но vscode ругается на свойство background: -moz-element(#css-source);
Говорит неверное значение -moz-element(#css-source)
Нигде не могу нагуглить по этому свойству.
Вот пример. Подскажите как решить?

popup<div class="burger-menu">
	<div id="css-result"></div>
	<div class="popup-text">Тут располагаются пункты меню</div>
</div>

<div id="css-source" class="wrapper">
<section class="content">
	<h1>Hello world</h1>
	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum  commodi, possimus optio dolorem voluptatibus eligendi doloribus. Modi, assumenda ad maiores alias aut minima aliquam dolor libero animi vero!</p>
</section>
</div>

body {
    position: relative;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #fff;
}

.content {
    width: 60%;
}

#css-result {
    position: absolute;
    top: -10%;
    left: -10%;
    width: 120%;
    height: 120%;
}

.burger-menu {
	position: fixed;
	top: 0;
	left: 0;
    width: 100%;
    height: 100vh;
	z-index: 10;
	background-color: rgba(0, 0, 0, .4);
	cursor: move;
	overflow: hidden;
	-webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

@-moz-document url-prefix() {
    #css-result {
        background: -moz-element(#css-source);
        background-repeat: no-repeat;
        background-position-y: 0;
        background-attachment: fixed;
        filter: blur(3px);
    }
	
	#css-result::after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .4);
	}
}

.popup-text {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	transform: translate(-50%, -50%);
	color: white;
	z-index: 100;
}

'use strict'

$(document).ready(function(){
	$(window).on("scroll", function(){
    let top = $(window).scrollTop();
    $("#css-result").css('background-position-y', "-" + top + 'px');
    });
});

Comments

[Роман Ямчук]

Браузерный префикс -moz- относится к mozilla firefox. Работать будет только там

Answer 1

[Сергей delphinpro]

Эта функция работает мало где.
https://caniuse.com/css-element-function
Ваш редактор может просто о ней не знать.
Примеры использования можно найти в документации MDN: CSS/element()