Issue #1870006 by nod_, BarisW, alwaysworking, Renrhaf, pk188, andrewmacpherson, ranjith_kumar_k_u, vikashsoni, Gauravmahlawat, wolffereast, Wim Leers, jessebeach, xjm: HTML5 validation with table sticky header is misaligned over the toolbar

4 files changed, 15 insertions, 0 deletions

diff --git a/core/misc/tableheader.es6.js b/core/misc/tableheader.es6.js
index 2debc838a3b..f7fc2f200e9 100644
--- a/core/misc/tableheader.es6.js
+++ b/core/misc/tableheader.es6.js
@@ -208,6 +208,8 @@
        * Create the duplicate header.
        */
       createSticky() {
+        // For caching purposes.
+        this.$html = $('html');
         // Clone the table header so it inherits original jQuery properties.
         const $stickyHeader = this.$originalHeader.clone(true);
         // Hide the table to avoid a flash of the header clone upon page load.
@@ -245,6 +247,11 @@
         if (typeof offsetLeft === 'number') {
           css.left = `${this.tableOffset.left - offsetLeft}px`;
         }
+        this.$html.css(
+          'scroll-padding-top',
+          displace.offsets.top +
+            (this.stickyVisible ? this.$stickyTable.height() : 0),
+        );
         return this.$stickyTable.css(css);
       },
 
diff --git a/core/misc/tableheader.js b/core/misc/tableheader.js
index 061b708dae4..149bd556037 100644
--- a/core/misc/tableheader.js
+++ b/core/misc/tableheader.js
@@ -90,6 +90,7 @@
     tableHeight: null,
     stickyVisible: false,
     createSticky: function createSticky() {
+      this.$html = $('html');
       var $stickyHeader = this.$originalHeader.clone(true);
       this.$stickyTable = $('<table class="sticky-header"></table>').css({
         visibility: 'hidden',
@@ -110,6 +111,7 @@
         css.left = "".concat(this.tableOffset.left - offsetLeft, "px");
       }
 
+      this.$html.css('scroll-padding-top', displace.offsets.top + (this.stickyVisible ? this.$stickyTable.height() : 0));
       return this.$stickyTable.css(css);
     },
     checkStickyVisible: function checkStickyVisible() {
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.es6.js b/core/modules/toolbar/js/views/ToolbarVisualView.es6.js
index 17bc3b8b03f..c6afbdc0eb2 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.es6.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.es6.js
@@ -86,6 +86,9 @@
         $('body').css({
           'padding-top': this.model.get('height'),
         });
+        $('html').css({
+          'scroll-padding-top': this.model.get('height'),
+        });
 
         this.triggerDisplace();
       },
diff --git a/core/modules/toolbar/js/views/ToolbarVisualView.js b/core/modules/toolbar/js/views/ToolbarVisualView.js
index 70013a04852..fcd7993cad6 100644
--- a/core/modules/toolbar/js/views/ToolbarVisualView.js
+++ b/core/modules/toolbar/js/views/ToolbarVisualView.js
@@ -36,6 +36,9 @@
       $('body').css({
         'padding-top': this.model.get('height')
       });
+      $('html').css({
+        'scroll-padding-top': this.model.get('height')
+      });
       this.triggerDisplace();
     },
     triggerDisplace: function triggerDisplace() {