Primera pregunta, pero he estado usando el sitio durante más de 8 años, así que tengan paciencia conmigo. Toda ayuda es muy apreciada. He pasado un par de días y demasiadas horas ahora en esto.

Tengo una página web que usa la validación HTML predeterminada a través del elemento de entrada requerido. En codepen, se muestra el "mensaje" si no relleno el campo. Agregué css para que el fondo también fuera amarillo. En codepen todo funciona muy bien, pero en mi computadora portátil aparece el fondo amarillo, pero la mayoría de las entradas no muestran el mensaje. Lo que es realmente extraño es que algunos de ellos darán el mensaje pero la mayoría no. Incluso tengo tres dentro del mismo div y uno da el mensaje mientras que los otros dos no. El mismo código exacto excepto por la identificación y el nombre. Sé que reconoce el error de validación porque activa el css para cambiar el fondo (input:invalid:focus), se desplaza hacia él pero no muestra ningún mensaje.

Pensé que tal vez era mi código, así que exporté el codepen y lo ejecuté desde la carpeta /dist descomprimida. Mismo comportamiento que el código original en mi computadora portátil. Envié un correo electrónico a codepen y cuando exportan y ejecutan desde la carpeta /dist, todos los campos muestran el mensaje para ellos. Lo empujé a un servidor IIS y obtuve el mismo comportamiento que en mi computadora portátil, algunos mensajes se muestran y otros no.

Tampoco hay errores en la consola. Estoy perdido. El código es demasiado grande para incluirlo y si pongo un enlace al codepen me obliga a incluir el código. Estoy usando Chrome 94. Ejecuté el HTML a través del servicio de marcado W3C y no hubo errores. El HTML codepen contiene errores del servicio de marcado W3C, pero aún funciona, mientras que el HTML sin errores localmente no lo hace.

codepen: codepen muestra el mensaje

local (codepen exportado): local sin mensaje pero se desplaza hacia él y cambia el fondo