fix(tabs): fix #163 ios 8 下页面异常

jd-opensource · Nov 8, 2018 · a76c9c2 · a76c9c2
1 parent 55f4bb0
commit a76c9c2
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/src/components/tabs-pane/index.scss b/src/components/tabs-pane/index.scss
@@ -4,6 +4,7 @@
   white-space: initial;
   vertical-align: top;
   font-size: 28px;
+  box-sizing: border-box;
 
   &--active {
     height: auto;

diff --git a/src/components/tabs/index.js b/src/components/tabs/index.js
@@ -144,9 +144,13 @@ export default class AtTabs extends AtComponent {
     }
     const bodyStyle = { }
     if (tabDirection === 'horizontal') {
-      bodyStyle.transform = `translate3d(-${current * 100}%, 0px, 0px)`
+      const transformStyle = `translate3d(-${current * 100}%, 0px, 0px)`
+      bodyStyle.transform = transformStyle
+      bodyStyle['-webkit-transform'] = transformStyle
     } else {
-      bodyStyle.transform = `translate3d(0px, -${current * 100}%, 0px)`
+      const transformStyle = `translate3d(0px, -${current * 100}%, 0px)`
+      bodyStyle.transform = transformStyle
+      bodyStyle['-webkit-transform'] = transformStyle
     }
     if (!animated) {
       bodyStyle.transition = 'unset'

diff --git a/src/components/tabs/index.scss b/src/components/tabs/index.scss
@@ -2,6 +2,8 @@
 @import '../../style/theme/default.scss';
 
 .at-tabs {
+  width: 100%;
+  height: 100%;
   overflow: hidden;
 
   &__item {
@@ -67,6 +69,8 @@
     white-space: nowrap;
     transition: all 0.3s;
     width: 100%;
+    overflow: visible;
+    will-change: transform, left, top;
   }
 
   &__underline {