Tengo un conflicto al configurar el atributo scroll-behaviour:smooth en la etiqueta html cuando hay campos de formulario en la página que usan la validación HTML5. Puedes ver este problema cuando usas Chrome (bien en Firefox/Safari)
Si el primer campo de error está fuera de la ventana gráfica, luego de la validación, el documento se desplaza hacia arriba y se enfoca en el campo, sin embargo, no se muestra el mensaje de error.
He configurado el código básico a continuación. Nota: este problema no ocurre cuando se usa Codepen, JSFiddle, etc.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Scroll Behaviour / Form validation Issue</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> html, body { scroll-behavior: smooth; } p { margin-bottom: 1200px; } </style> </head> <body> <h3>Scroll behavior / From validation issue</h3> <form id="frm-enquiry" action="?"> <fieldset> <label for="first-name">First name</label> <input id="first-name" type="text" required /> <p>Scroll down to submit button and click. If scroll occurs then no error message is shown. <br/>(Note: shows if you hit enter on the field)</p> <button type="submit">Submit</button> </fieldset> </form> </body> </html>¿Alguien encontró esto antes?