Tab Highlight SCSS code missing for IOS

[aedwards12]

Ionic version: (check one with "x")
[ ] 1.x
[x ] 2.x

I'm submitting a ... (check one with "x")
[ x] bug report
[ ] feature request
[ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or http://ionicworldwide.herokuapp.com/

Current behavior:
config.tabHighlight = true; does not add the highlight bar in the tab element

Expected behavior:
config.tabHighlight = true; to add hightlight bar in the tab element

Steps to reproduce:

Related code:
ios not working:
path "ionic/src/components/tabs/tabs.ios.scss" is missing the css code for Tab Highlight

md working:
ionic/src/components/tabs/tabs.md.scss

// Material Design Tab Highlight
// --------------------------------------------------

.tabs-md[tabsHighlight=true] .tab-highlight {
position: absolute;
bottom: 0;
left: 0;
display: block;

width: 1px;
height: 2px;

background: $tabs-md-tab-color-active;
transform: translateZ(0);
transform-origin: 0 0;
}

.tabs-md[tabsHighlight=true] .tab-highlight.animate {
transition-duration: 300ms;
}

.tabs-md[tabsHighlight=true][tabsPlacement=bottom] .tab-highlight {
top: 0;
}

Other information:

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

Cordova CLI: 6.4.0 
Ionic Framework Version: 2.0.0-rc.4
Ionic CLI Version: 2.1.17
Ionic App Lib Version: 2.1.7
Ionic App Scripts Version: 0.0.47
ios-deploy version: 1.9.0 
ios-sim version: 5.0.13 
OS: macOS Sierra
Node Version: v6.9.1
Xcode version: Xcode 8.0 Build version 8A218a

[premcarver]

I am running on latest ionic but still this is not fixed. Can you please help me?

local packages:

@ionic/app-scripts              : 1.3.7
@ionic/cli-plugin-cordova       : 1.4.0
@ionic/cli-plugin-ionic-angular : 1.3.1
Cordova Platforms               : android 6.2.3 ios 4.4.0
Ionic Framework                 : ionic-angular 3.3.0

System:

Node       : v8.1.1
OS         : macOS Sierra
Xcode      : Xcode 8.3.2 Build version 8E2002
ios-deploy : 1.9.1
ios-sim    : 6.0.0
npm        : 5.0.3

[blusk0]

It appears that it still isn't fixed, but I added the following to my variables.scss file in theme and it's working now:

.tabs-ios[tabsHighlight=true] .tab-highlight {
  left: 0;
  bottom: 0;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
  position: absolute;
  display: block;
  width: 1px;
  height: 2px;
  background: #007ec5;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

.tabs-ios[tabsHighlight=true] .tab-highlight.animate {
  transition-duration: 300ms;
}

.tabs-ios[tabsHighlight=true][tabsPlacement=bottom] > .tabbar > .tab-highlight {
  top: 0;
}

[KishuPro]

@aedwards12:

Please correct the typo here

config.tabHighlight = true;

[KishuPro]

For me too the ios version in none of the browsers (ionic serve -l on Chrome, FF, IE11) show the highlight bar; regardless of the tabbar position either. Perhaps something wrong with the css transform of the highlight div for ios?

Android and Windows versions are working perfectly.

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!