/* H5 性能优化专用重置样式
  请在 main.js 第一行引入: import '@/styles/h5-reset.css'
*/

:root {
  /* 预设变量，方便统一调整 */
  --safe-area-bottom: env(safe-area-inset-bottom);
}

html, body {
  width: 100%;
  height: 100%;
  /* 1. 开启 iOS 原生惯性滚动 (解决滑动生涩) */
  -webkit-overflow-scrolling: touch;

  /* 2. 禁止双击缩放 (解决 300ms 点击延迟) */
  touch-action: manipulation;

  /* 3. 字体抗锯齿 (让文字更清晰) */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 4. 防止 iOS 下拉回弹导致页面整体拖动 (可选) */
  overscroll-behavior-y: none;
}

/* 全局去除点击高亮 (解决点击闪烁) */
* {
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
}

/* 图片渲染优化 */
img {
  /* 防止图片加载时布局跳动 */
  display: block;
  max-width: 100%;
  /* 只有当图片进入视口才渲染 (提升长列表性能) */
  content-visibility: auto;
}

/* 强制开启 GPU 加速 (解决弹窗/动画掉帧) */
.modal-mask,
.modal-panel,
.slide-up-enter-active,
.slide-up-leave-active {
  transform: translateZ(0);
  will-change: transform, opacity;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* 统一滚动容器体验 */
.scroll-container {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* 隐藏滚动条但保留功能 */
  scrollbar-width: none;
}
.scroll-container::-webkit-scrollbar {
  display: none;
}