Is there a way to make a textarea not show CSS transforms when resized?

Question

When I want to set the background transition of <textarea> on hover, it works. However, when I try to resize it, the transition time still works.

This is my code, you can drag <textarea> to see what's wrong:

textarea::-webkit-resizer:active {
  transition:0s;
}
textarea:hover{
  background:rgb(200,200,200);
}


textarea{
  transition:1s;
}

<textarea></textarea>

I'm looking for a way to not perform a transition while dragging.

Answer 1

This problem can be solved by specifying the CSS property to be converted to, in which case specifying the background color will solve the problem:

textarea::-webkit-resizer:active {
  transition: 0s;
}

textarea:hover {
  background: rgb(200, 200, 200);
}

textarea {
  transition: background-color 1s;
}