Firefox 71 backdrop-filter bug

Firefox 71 backdrop-filter bug 16.10.2019

by ziom1

CSS

body {
  margin: 0;
}

.container {
  /* Not 100vw/100vh for not showing annoying scroll */
	width: 95vw;
	height: 95vh;
	position: relative;
	overflow: hidden;
}

.containerBackground {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}

.containerBackgroundChild {
	width: 100%;
	height: 100%;
	background-color: pink;
	transform: perspective(1000px) rotateX(4.89deg) rotateY(12.27deg) scale3d(1, 1, 1);
}

.containerBackgroundChild--transformHack {
  transform: none;
}

.containerContent {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}

.containerContent--opacityHack {
  opacity: 0.9;
}

.elementContainer {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 100%;
  grid-template-rows: 1fr 1fr;
}

.someElement {
	width: 100%;
	height: 100%;
	border: 1px solid black;
	background-color: rgba(0, 0, 0, 0.2);
	backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: grid;
}

.square {
  border: 1px dashed black;
  width: 50px;
  height: 50px;
  place-self: center;
}

.someText {
  color: white;
}

JavaScript

const container = document.createElement('div');
container.classList.add('container');

const containerBackground = document.createElement('div')
containerBackground.classList.add('containerBackground');
container.appendChild(containerBackground);

const containerBackgroundChild = document.createElement('div')
containerBackgroundChild.classList.add('containerBackgroundChild');
containerBackground.appendChild(containerBackgroundChild);

const containerContent = document.createElement('div')
containerContent.classList.add('containerContent');
container.appendChild(containerContent);

/* Generating "test" element */
const generateElement = () => {

	const elementContainer = document.createElement('div');
  elementContainer.classList.add('elementContainer');
  
  
  const someElement = document.createElement('div');
  someElement.classList.add('someElement');
  elementContainer.appendChild(someElement);
  
  const square = document.createElement('div');
  square.classList.add('square');
  someElement.appendChild(square);

  const someText = document.createElement('div');
  someText.classList.add('someText');
  someText.textContent = 'Some text';
  elementContainer.appendChild(someText);
  
  return elementContainer;

};

containerContent.appendChild(generateElement());
containerContent.appendChild(generateElement());
containerContent.appendChild(generateElement());

// ...
const opacityButton = document.createElement('button');
opacityButton.textContent = 'Opacity: off';
document.body.appendChild(opacityButton);
opacityButton.onclick = () => {
	
  const hackClassName = 'containerContent--opacityHack';

	if (containerContent.classList.contains(hackClassName)) {
  	containerContent.classList.remove(hackClassName);
    opacityButton.textContent = 'Opacity: off';
  }
  else {
  	containerContent.classList.add(hackClassName);
    opacityButton.textContent = 'Opacity: on';
  }
};

// ...
const backgroundTransformButton =...