15

I'm having a conflict when setting the scroll-behaviour:smooth attribute on the html tag when there are form fields on the page using HTML5 Validation. You can see this issue when using Chrome (fine in Firefox/Safari)

If the first error field is outside of the viewport then on validation, the document scrolls up and focusses on the field however the error message is not shown.

I've setup the basic code below. Note: this issue doesn't occur when using 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>

Has anyone encountered this before?

Darren Greer
  • 151
  • 4

1 Answers1

1

The error doesn't happen when you use scroll-behavior: smooth only in the body tag:

<style>
    body {
        scroll-behavior: smooth;
    }

    p {
        margin-bottom: 1200px;
    }
</style>

I think this is a quick fix for your problem.

Aldo Ortiz
  • 49
  • 1