Chrome text nodes bug 16.10.2019

Chrome text nodes bug 16.10.2019

by ziom1

CSS

.handler {
	position: absolute;
	top: 0;
	left: 0;
	width: 2em;
	height: 2em;
	background-color: pink;
}

.handled {
	position: absolute;
	background-color: white;
	padding: 1em;
	border-radius: 1em;
	overflow-wrap: break-word;
  overflow: auto;
	height: 200px;
	width: 200px;
	user-select: none;
	-webkit-user-select: none;
}

JavaScript

// Element for starting "pointermove" event.
const handler = document.createElement('div')
handler.classList.add('handler');
document.body.appendChild(handler);

// Container for big number of text nodes.
const handledElement = document.createElement('div');
handledElement.classList.add('handled');
handledElement.textContent = new Array(50000).fill('Lorem ipsum xoxo.').join(' ')
document.body.appendChild(handledElement);

const onPointerMove = (event) => {

	// Any (not specific) x, y and scale to make transform.
	const x = event.clientX / 2;
  const y = event.clientY / 2;
  const scale = 1 + event.clientX / event.clientY * 0.2;
	handledElement.style.transform = `translate(${x}px, ${y}px) scale(${scale})`;
}

handler.onpointerdown = () => {
	window.addEventListener('pointermove', onPointerMove);
}

window.onpointerup = () => {
	window.removeEventListener('pointermove', onPointerMove);
}

// JWP/BC