Skip to content
This repository has been archived by the owner on Sep 5, 2024. It is now read-only.

Commit

Permalink
fix(tabs): fixes flicker issue with dynamic height
Browse files Browse the repository at this point in the history
  • Loading branch information
Robert Messerle committed Apr 13, 2015
1 parent 7afb93f commit 48eeb62
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 7 deletions.
6 changes: 2 additions & 4 deletions src/components/tabs/js/tabsController.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -216,10 +216,8 @@
{ height: newHeight + 'px'}
)
.then(function () {
$timeout(function () {
$element.css('height', '');
locked = false;
}, 0, false);
$element.css('height', '');
locked = false;
});
}

Expand Down
9 changes: 6 additions & 3 deletions src/components/tabs/tabs.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ md-tabs {
overflow: hidden;
position: relative;
transition: height $swift-ease-in-out-duration $swift-ease-in-out-timing-function;
&:not(.md-no-tab-content) {
&:not(.md-no-tab-content):not([md-dynamic-height]) {
min-height: 200 + $tabs-header-height;
}
&[md-align-tabs="bottom"] {
Expand All @@ -35,11 +35,11 @@ md-tabs {
md-tabs-content-wrapper {
min-height: 0;
position: relative;
top: 0; left: 0; right: 0; bottom: 0;
top: auto; left: auto; right: auto; bottom: auto;
overflow: visible;
}
md-tab-content {
&:not(.md-left):not(.md-right):not(.ng-animate) {
&.md-active {
position: relative;
}
}
Expand All @@ -57,6 +57,9 @@ md-tabs {
md-tabs-wrapper {
border-width: 0 0 1px;
border-style: solid;
.md-tab {
padding-bottom: 11px;
}
}
}
}
Expand Down

6 comments on commit 48eeb62

@hodeyp
Copy link

@hodeyp hodeyp commented on 48eeb62 Apr 14, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robertmesserle there seems to still be an issue when using Safari. Now when resizing it resizes correctly and then a few milliseconds later the entire md-tabs shrinks to 0 height and then back to the right size again.

@robertmesserle
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hodeyp Can you confirm that this is still an issue? I believe my later commit resolved this issue, and I am not able to recreate this in Safari.

@hodeyp
Copy link

@hodeyp hodeyp commented on 48eeb62 Apr 14, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robertmesserle - I'm afraid it is still an issue. All works beautifully on Chrome but safari is actually looking worse than before.

I have recorded an example using the material web site on the latest build (v0.8.3 - SHA 375d4fc)

https://drive.google.com/file/d/0B-OD4l6gS9OGRmUtSU1qMEh4YzA/view?usp=sharing

@robertmesserle
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@hodeyp I was able to recreate this issue in Safari and added a fix to master. Should be good now. Thanks for the heads up! =)

@hodeyp
Copy link

@hodeyp hodeyp commented on 48eeb62 Apr 15, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

most excellent! thanks!

@hodeyp
Copy link

@hodeyp hodeyp commented on 48eeb62 Apr 15, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@robertmesserle you guys are doing an amazing job btw, the tabs control is spectacular!

Please sign in to comment.