I recently utilized Vue to create a contenteditable div on my website. However, I encountered an issue where a gray area appeared on the upper left corner when hovering over the div. Oddly enough, this problem only occurred in Chrome, while Safari and Firefox worked perfectly.
The gray area that appeared was not a part of the DOM, but seemed more like a selection effect.
Here is the code I used:
<div
ref="exer-input-textarea"
:class="{'textarea': true, 'fixed-size': box === false}"
contenteditable="true"
v-html="modelValue"/>
CSS
.exer-input, .exer-textarea-box-input
& .textarea {
width: 100%;
font-size: 16px;
outline: none;
color: rgba(0, 0, 0, 0.87);
line-height: 2.1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
word-wrap: break-word;
}
& .fixed-size {
overflow: scroll;
max-height: 100px;
}