Mam taki problem - napisałem taki oto kod który uruchamiany na telefonie (firefox) działa bez zarzutu, jednak gdy to samo robię na swoim PC to już zaprogramowany efekt paralaksy nie działa.
Jaki może być tego powód?

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" >
		<meta name="keywords" content="Тest">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<title>
			Test
		</title>
	</head>
	<body>
		<main class="wrapper">
      		<section class="section parallax bg1">
         		<h1>Cute Kitten</h1>
      		</section>
      		<section class="section static">
         		<h1>Boring</h1>
      		</section>
      		<section class="section parallax bg2">
         		<h1>Fluffy Kitten</h1>
      		</section>
   		</main>
	</body>	

	<style>
    	.wrapper {
 			height: 100vh;
 			overflow-x: hidden;
 			overflow-y: auto;
 			perspective: 20px;
 			-moz-perspective: 20px;
 			-webkit-perspective: 20px;
    	}

    	.section {
 			position: relative;
 			height: 100vh;
 			display: flex;
 			align-items: center;
 			justify-content: center;
 			color: white;
 			text-shadow: 0 0 5px #000;
    	}

    	.parallax::after {
 			content: " ";
 			position: absolute;
 			top: 0;
 			right: 0;
 			bottom: 0;
 			left: 0;
 			transform: translateZ(-20px) scale(1.5);
 			-moz-transform: translateZ(-20px) scale(1.5);
 			-webkit-transform: translateZ(-20px) scale(1.5);
 			background-size: 100%;
 			z-index: -1;
    	}

    	.static {
 			background: red;
    	}

    	.bg1::after {
 			background-image: url('https://placekitten.com/g/900/700');
    	}

    	.bg2::after {
 			background-image: url('https://placekitten.com/g/800/600');
    	}
	</style>
</html>