diff --git a/src/components/tabs/tab.ts b/src/components/tabs/tab.ts
index e47563acc..884ed7e15 100644
--- a/src/components/tabs/tab.ts
+++ b/src/components/tabs/tab.ts
@@ -122,10 +122,13 @@ export class CoreTabComponent implements OnInit, OnDestroy {
 
         // Setup tab scrolling.
         setTimeout(() => {
+            // TODO: Solve undefined this.scroll on tab change.
+
             if (this.scroll) {
                 this.scroll.getScrollElement().onscroll = (e): void => {
-                    this.tabs.showHideTabs(e);
+                    this.tabs.showHideTabs(e.target);
                 };
+                this.tabs.showHideTabs(this.scroll.getScrollElement());
             }
         }, 1);
     }
diff --git a/src/components/tabs/tabs.scss b/src/components/tabs/tabs.scss
index 8d6c3a5e1..dcad7fd56 100644
--- a/src/components/tabs/tabs.scss
+++ b/src/components/tabs/tabs.scss
@@ -118,8 +118,10 @@ ion-app.app-root core-tabs {
     &.tabs-hidden {
         .core-tabs-bar {
             display: none !important;
+            transform: translateY(0) !important;
         }
         .core-tabs-content-container {
+            transform: translateY(0) !important;
             padding-bottom: 0 !important;
         }
     }
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index d15eec81a..7d8944949 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -63,6 +63,7 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     numTabsShown = 0;
     direction = 'ltr';
     description = '';
+    lastScroll = 0;
 
     protected originalTabsContainer: HTMLElement; // The container of the original tabs. It will include each tab's content.
     protected initialized = false;
@@ -406,22 +407,38 @@ export class CoreTabsComponent implements OnInit, AfterViewInit, OnChanges, OnDe
     /**
      * Show or hide the tabs. This is used when the user is scrolling inside a tab.
      *
-     * @param {any} e Scroll event.
+     * @param {any} scrollElement Scroll element to check scroll position.
      */
-    showHideTabs(e: any): void {
+    showHideTabs(scrollElement: any): void {
         if (!this.tabBarHeight) {
             // We don't have the tab bar height, this means the tab bar isn't shown.
             return;
         }
 
-        if (this.tabsShown && e.target.scrollTop - this.tabBarHeight > this.tabBarHeight) {
-            this.tabBarElement.classList.add('tabs-hidden');
+        const scroll = parseInt(scrollElement.scrollTop, 10);
+        if (scroll == this.lastScroll) {
+            // Ensure scroll has been modified to avoid flicks.
+            return;
+        }
+
+        if (this.tabsShown && scroll > this.tabBarHeight) {
             this.tabsShown = false;
-        } else if (!this.tabsShown && e.target.scrollTop < this.tabBarHeight) {
-            this.tabBarElement.classList.remove('tabs-hidden');
+
+            // Hide tabs.
+            this.tabBarElement.classList.add('tabs-hidden');
+        } else if (!this.tabsShown && scroll <= this.tabBarHeight) {
             this.tabsShown = true;
+            this.tabBarElement.classList.remove('tabs-hidden');
             this.calculateSlides();
         }
+
+        if (this.tabsShown) {
+            // Smooth translation.
+            this.topTabsElement.style.transform = 'translateY(-' + scroll + 'px)';
+            this.originalTabsContainer.style.transform = 'translateY(-' + scroll + 'px)';
+            this.originalTabsContainer.style.paddingBottom = this.tabBarHeight - scroll + 'px';
+        }
+        this.lastScroll = parseInt(scrollElement.scrollTop, 10);
     }
 
     /**