WCM6 收口企业微信多手机移动渲染稳定化

client/src/styles/mobile-touch.css

@@ -8,6 +8,7 @@
 
 :root {
   --mobile-viewport-height: 100vh;
+  --mobile-safe-area-bottom: env(safe-area-inset-bottom, 0px);
   --mobile-page-x: clamp(10px, 3vw, 20px);
   --mobile-page-y: clamp(10px, 2.8vw, 20px);
   --mobile-card-gap: clamp(8px, 2.5vw, 14px);
@@ -81,6 +82,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
   border-radius: 12px;
   background: rgb(255 255 255 / 0.86);
   font-size: 22px;
@@ -88,6 +90,10 @@
   box-shadow: 0 1px 2px rgb(15 23 42 / 0.07);
 }
 
+.mobile-icon-action__icon svg {
+  display: block;
+}
+
 .mobile-icon-action__label {
   display: block;
   max-width: 100%;
@@ -129,12 +135,14 @@
 }
 
 .mobile-bottom-nav-surface {
-  min-height: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom, 0px));
-  padding: 0.375rem var(--mobile-page-x) calc(0.35rem + env(safe-area-inset-bottom, 0px));
+  min-height: calc(var(--mobile-bottom-nav-height) + var(--mobile-safe-area-bottom));
+  padding: 0.375rem var(--mobile-page-x) calc(0.35rem + var(--mobile-safe-area-bottom));
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
 }
 
 .mobile-sticky-action-surface {
-  padding: 0.75rem var(--mobile-page-x) max(0.75rem, env(safe-area-inset-bottom, 0px));
+  padding: 0.75rem var(--mobile-page-x) max(0.75rem, var(--mobile-safe-area-bottom));
 }
 
 @media (max-width: 359px) {