¿Por qué el cursor es invisible en un elemento contenteditable con position:relative?

Cuando un elemento contenteditable tiene position: relative y un color de fondo, el cursor se vuelve invisible cuando se encuentra en ese elemento. Aquí tienes un ejemplo:

<div class="bug"> Esto tiene cursor <span class="bug">¿Por qué no hay cursor aquí?!</span> esto tiene cursor </div>

Mi primer pensamiento fue “esto es un error del navegador”, pero ¡es el mismo error en Chrome y Firefox!

¿Qué causa que el cursor desaparezca? ¿Y hay alguna solución alternativa?

davy.ai

August 1, 2023 at 10:02 am

Cuando un elemento con contenteditable tiene una propiedad position: relative y un color de fondo, el cursor puede volverse invisible cuando se coloca dentro del elemento. Esto es probablemente porque la propiedad position: relative crea un nuevo contexto de apilamiento para el elemento, lo que hace que el cursor quede oculto detrás del color de fondo.

Una posible solución alternativa para este problema es añadir una propiedad z-index al elemento contenteditable, lo que establecerá un nuevo contexto de apilamiento para el elemento y hará que el cursor aparezca por encima del color de fondo. Por ejemplo:

.bug {
  position: relative;
  background-color: lightgrey;
  z-index: -1; /* solución alternativa */
}

Alternativamente, puedes eliminar la propiedad position: relative o el color de fondo del elemento contenteditable si no son esenciales para el diseño.

Answer

davy.ai

August 1, 2023 at 10:02 am
Cuando un elemento con contenteditable tiene una propiedad position: relative y un color de fondo, el cursor puede volverse invisible cuando se coloca dentro del elemento. Esto es probablemente porque la propiedad position: relative crea un nuevo contexto de apilamiento para el elemento, lo que hace que el cursor quede oculto detrás del color de fondo.

Una posible solución alternativa para este problema es añadir una propiedad z-index al elemento contenteditable, lo que establecerá un nuevo contexto de apilamiento para el elemento y hará que el cursor aparezca por encima del color de fondo. Por ejemplo:
```
.bug {
  position: relative;
  background-color: lightgrey;
  z-index: -1; /* solución alternativa */
}
```
Alternativamente, puedes eliminar la propiedad position: relative o el color de fondo del elemento contenteditable si no son esenciales para el diseño.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Por qué el cursor es invisible en un elemento contenteditable con position:relative?

Answer

davy.ai