Shopify Debut Theme Adding padding-bottom: 60px after page loads to the html element

Question

For some reason after the page loads a style attribute is being added to the HTML element with padding-bottom: 60px;

How do I get it so this attribute is not added to the HTML element when the page loads. This is frustrating because I am not able to remove it using CSS.

I noticed other people have run into this issue and I tried copying one of the solutions which were to add this code to theme.js

$(window).load(function() {

  $('html').removeAttr('style');

});

Answer 1

In my testing this only happens when previewing a theme and Shopify inserts an iframe element at the bottom of the body (it has an id of preview-bar-iframe).

It's 60px high and a script adds some padding to the bottom of the html element. I guess to allow you to see all the page.

I use this script to remove the preview and padding after a couple of seconds.

// Remove the annoying Shopify #preview-bar-iframe
window.setTimeout(() => {
    let previewBar = document.getElementById('preview-bar-iframe')
    if (previewBar) {
        previewBar.style['display'] = 'none';
        document.documentElement.removeAttribute('style');
    }
}, 2000);