JSFiddle - React, Tailwind, and code Playground

by Drath

HTML

<h1>Chrome image-rendering: pixelated macOS bugs</h1>

<img class="anvil first" src="http://vaughnroyko.com/chromebug/stoneanvil.png" />
<img class="anvil hover" src="http://vaughnroyko.com/chromebug/stoneanvil.png" />

<br>
<button>Toggle Animation</button>

<h2>Explanation</h2>

<ul>
  <li>1. image-rendering: pixelated does not function during transitions. Try hovering over the second anvil while the animation is disabled.<br><img src="http://vaughnroyko.com/chromebug/bug2.gif" /></li>
  <li>2. Having a transform animation running corrupts all other image-rendering: pixelated; elements that are transformed, making them blurry. Try hovering over the second anvil while animation is enabled.<br><img src="http://vaughnroyko.com/chromebug/bug1.gif" /></li>
</ul>

CSS

.anvil {
  width: 64px;
  height: 64px;
  image-rendering: pixelated;
}

.animate {
  animation: zoom-in-out 4s ease-in-out infinite;
}

.hover:hover {
  transition: all 0.75s ease-in-out;
  transform: scale(1.25);
  cursor: zoom-in;
}

@keyframes zoom-in-out {
	0% {
		transform: scale(0.5);
	}
	50% {
		transform: scale(1.0);
	}
	100% {
		transform: scale(0.5);
	}
}

JavaScript

$('button').click(function(){
	$('.first').toggleClass('animate');
});