Bootstrap 5在宏碁B3-A30平板Chrome下部分组件失效修复方案

宏碁B3-A30为2016年发布的入门平板，出厂搭载Android 6.0系统，硬件采用联发科MT8163方案。即便你在该设备上安装了和其他设备同版本号的Chrome，受旧系统WebView内核、老旧GPU驱动限制，浏览器对Bootstrap 5默认依赖的两个特性存在兼容bug：

• 触摸事件触发时event.target判定存在偏差，导致Bootstrap 5的全局事件委托无法识别data-bs-*属性绑定的触发元素
• 带fade类的组件过渡动画依赖CSS transform合成层渲染，旧GPU驱动对该特性支持存在缺陷，直接导致modal、tabs这类带切换过渡的组件无法正常触发显示/隐藏逻辑

按优先级依次尝试以下方案，从上到下侵入性依次降低，且所有修改不会影响新设备的正常运行：

方案1：补全浏览器API兼容补丁，关闭默认过渡动画 #

1. 在页面所有CSS、JS资源引入之前，加入以下兼容补丁，修复旧Chrome缺失的API：

<script>
// 补全旧浏览器缺失的DOM API
if (!Element.prototype.matches) {
  Element.prototype.matches = Element.prototype.msMatchesSelector || Element.prototype.webkitMatchesSelector;
}
if (!Element.prototype.closest) {
  Element.prototype.closest = function(s) {
    var el = this;
    do {
      if (Element.prototype.matches.call(el, s)) return el;
      el = el.parentElement || el.parentNode;
    } while (el !== null && el.nodeType === 1);
    return null;
  };
}
(function () {
  if (typeof window.CustomEvent === "function") return false;
  function CustomEvent(event, params) {
    params = params || { bubbles: false, cancelable: false, detail: null };
    var evt = document.createEvent('CustomEvent');
    evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
    return evt;
  }
  window.CustomEvent = CustomEvent;
})();
</script>

2. 在引入bootstrap.bundle.min.js之前加入全局配置，默认关闭组件过渡效果：

<script>
window.bootstrap = {
  Config: {
    Default: {
      transition: false
    }
  }
}
</script>

3. 移除所有交互组件上的fade类，比如示例中modal标签的class="modal fade"改为class="modal"，tabs组件的fade类同步删除，规避旧GPU驱动的合成层渲染bug。

方案2：手动初始化组件替代data属性自动绑定 #

如果方案1处理后仍有组件失效，放弃data-bs-*属性的全局自动绑定逻辑，改用JS手动初始化组件并绑定事件。以你提供的modal示例为例，在引入bootstrap JS之后加入以下代码：

<script>
document.addEventListener('DOMContentLoaded', function() {
  // 初始化Modal
  const modalEl = document.getElementById('exampleModal');
  const modalIns = new bootstrap.Modal(modalEl, {
    backdrop: true,
    keyboard: true,
    focus: true
  });
  // 绑定触发按钮事件
  document.querySelector('[data-bs-target="#exampleModal"]').addEventListener('click', () => {
    modalIns.show();
  });
  // 绑定关闭按钮事件
  modalEl.querySelectorAll('[data-bs-dismiss="modal"]').forEach(btn => {
    btn.addEventListener('click', () => {
      modalIns.hide();
    })
  })

  // Tabs组件按相同逻辑手动初始化即可，参考代码：
  // const tabTriggerList = document.querySelectorAll('#myTab [data-bs-toggle="tab"]')
  // tabTriggerList.forEach(triggerEl => {
  //   const tabIns = new bootstrap.Tab(triggerEl)
  //   triggerEl.addEventListener('click', e => {
  //     e.preventDefault()
  //     tabIns.show()
  //   })
  // })
})
</script>

方案3：添加CSS兼容规则修复触摸与层级问题 #

如果存在点击触发不灵敏、组件层级异常的问题，在全局CSS中加入以下规则：

/* 修复旧安卓设备触摸事件延迟、点透问题 */
[data-bs-toggle="modal"], 
[data-bs-toggle="tab"], 
.btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
/* 修复旧设备上modal层级、transform渲染异常 */
.modal, .modal-backdrop {
  z-index: 1055 !important;
  transform: none !important;
}
.modal-backdrop {
  z-index: 1050 !important;
}

注：先修正你提供的示例代码里重复写了两次</body>的笔误，避免HTML结构解析异常干扰组件运行。

如果测试后仍有异常，可以补充提供该平板上Chrome的具体版本号、Android系统版本号进一步定位。

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