Shopify Debut主题加载后html元素被添加padding-bottom:60px如何解决

现有方案可行性评估 #

你给出的方案是可行的，但存在两个明显缺陷：

• 触发时机太晚：$(window).load() 需要等页面所有资源（图片、字体、第三方插件资源等）全部加载完成才执行，会导致页面加载过程中先出现底部60px的空白，等完全加载后才突然消失，产生明显的布局跳动（CLS体验问题）
• 副作用太大：直接移除html标签的所有style属性，如果页面有其他合法的内联样式也会被一起删除，可能影响其他功能的正常运行

更优解决方案 #

方案1：精准修改JS逻辑，避免误伤和布局跳动 #

把触发时机提前到DOM结构加载完成就执行，并且只删除padding-bottom指定样式，不要清空所有style属性，原生JS代码如下：

document.addEventListener('DOMContentLoaded', function() {
  document.documentElement.style.paddingBottom = '';
});

如果主题依赖jQuery也可以写成对应版本：

$(document).ready(function() {
  $('html').css('padding-bottom', '');
});

这个方案比原有方案触发早很多，基本不会出现布局跳动，也不会影响其他内联样式。

方案2：高优先级CSS覆盖，无需修改JS #

你之前尝试CSS无法移除是因为内联样式优先级高于普通外部/内部CSS规则，只要加上!important声明就可以覆盖内联样式，直接在主题的全局CSS文件（通常为theme.css、base.css等）添加以下代码即可：

html {
  padding-bottom: 0 !important;
}

这个方案是所有方案里最优的，不需要等待JS执行，页面从渲染初始就不会出现多余的底部空白，完全不会产生布局跳动问题。

方案3：根因修复，从源码删除冗余逻辑 #

Debut主题自动添加该样式基本是自带的移动端底部固定栏相关的JS逻辑导致的，你可以直接在theme.js文件中搜索关键词padding-bottom或者60px，找到给html标签添加该样式的代码段直接注释或者删除，从根源上解决问题，没有任何额外兼容问题。

内容的提问来源于stack exchange，提问作者lachnroll