Почему не работает размытие?

Question

[GaserV]

подскажите. Почему не работает фильтр размытия? Затемнения срабатывает, но само размытие - нет. В чем проблема?
Размытие срабатывает, в случае если применить его к .menu, но в таком случае, размывается и весь контент внутри него.

<div class="menu">
		<div class="menu-wrap"></div>
		<div class="menu-content">
			<div class="top-nav">
				<a href="/" class="logo">
					<img src="images/logo.png" alt="">
				</a>
				<div class="section-title">
					текст
					<div>
						текст
					</div>
				</div>
				<div class="close-icon"></div>
			</div>
			<nav class="nav">
				<ul>
					<li><a href="#">Главная</a></li>
					<li><a href="#">О компании</a></li>
					<li><a href="#">Услуги</a></li>
					<li><a href="#">Цены</a></li>
					<li><a href="#">Портфолио</a></li>
					<li><a href="#">Контакты</a></li>
				</ul>
			</nav>
		</div>
	</div>

.menu
	@extend %tr4
	-webkit-transform: scale(0)
	-ms-transform: scale(0)
	-o-transform: scale(0)
	transform: scale(0)
	position: fixed
	top: 0
	right: 0
	width: 100%
	height: 100%
	z-index: 3
	

	&-wrap
		position: fixed
		top: 0
		right: 0
		width: 100%
		height: 100%
		z-index: 3
		background: rgba(0,0,0,0.8)
		-webkit-filter: blur(5px)
		-moz-filter: blur(5px)
		-o-filter: blur(5px)
		-ms-filter: blur(5px)
		filter: blur(5px)
		
	&-content
		position: fixed
		top: 0
		left: 0
		width: 100%
		height: 100%
		z-index: 4

	&.active
		-webkit-transform: scale(1)
		-ms-transform: scale(1)
		-o-transform: scale(1)
		transform: scale(1)

Comments

[Abdula Magomedov]

Для получения быстрых ответов, заливайте код в песочницу. Типа такого jsfiddle.net

Answer 1

[GaserV]

Проблему решил тем, что к section добавляю класс blur, в котором прописан фильтр.

Answer 2

[Nikita Shchypylov]

Помоему, проблема в коде. Ошибку нужно искать там же