Menu
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?
825
This is a bug in the Blink rendering engine (used by Chrome-based browsers, Edge and Opera). Here's the bug report:
https://bugs.chromium.org/p/chromium/issues/detail?id=1245534
It also seems to behave similarly in Safari, though I don't think they have an open bug tracking system.
In Firefox, it seems to behave correctly, but ignores the smooth scroll, simply jumping to the correct spot on the page.
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
