angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.34k stars 6.74k forks source link

Tootip not hide #8728

Closed Howard-Song closed 6 years ago

Howard-Song commented 6 years ago

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I create a scrollHeight button,the button shows with$('html').scrollTop() > 0 hide with $('html').scrollTop() == 0,when $('html').scrollTop() == 0 after alt+tab switch from another app,the toolTip should be hided.

What is the current behavior?

The problem is when when $('html').scrollTop() == 0 I use alt+tab back from another app,the toolTip show out. Click in the page,toolTip hide. here my component: html:

<button class="scroll-height" mat-raised-button matTooltip="back to top!" [ngClass]="{'show-scroll':scrollTop}" matTooltipPosition="before" (click)="goTop()">
  <i class="fa fa-angle-up"></i>
</button>

ts:

 goTop() {
    $('html').animate({
      scrollTop: 0
    }, 500);
  }

css:

.scroll-height{
  min-width: 40px;
  max-width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 25px;
  text-align:center;
  position:fixed;
  background-color: #607d8b;
  color: #fff;
  bottom: 20px;
  right: -60px;
  z-index: 999;
  transition: background-color .18s cubic-bezier(.6,0,.1,1),box-shadow .18s cubic-bezier(.6,0,.1,1),transform .18s cubic-bezier(.6,0,.1,1);
  i{
    margin-left: -3px;
    height: 40px;
    line-height: 40px;
    margin-top: -5px;
  }
}
.show-scroll{
  transform: translate(-84px, 0);
}

What are the steps to reproduce?

Providing a StackBlitz/Plunker (or similar) is the best way to get the team to see your issue.
Plunker starter (using on @master): https://goo.gl/uDmqyY
StackBlitz starter (using latest npm release): https://goo.gl/wwnhMV

What is the use-case or motivation for changing an existing behavior?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular: 5.0.0, Material: 5.0.0-rc0, OS: win10, TypeScript: 2.6.1, Browsers: Chrome@62.0.3202.94

Is there anything else we should know?

When I click the button with goTop() and use alt+tab switch from chrome to another app,tooTip will be hided,and show out again when back to chrome. update: Not only use alt+tab any switch from chrome to another app,and back to chrome can cause this problem.

andrewseguin commented 6 years ago

Please re-open with a reproduction on plunker or stackblitz to help us investigate the issue.

Howard-Song commented 6 years ago

Here the demo for this issue,please re-open. scroll the view,click the button on the lower left corner and use alt+tab or any way switch from chrom and back,the tootip shows.

angular-automatic-lock-bot[bot] commented 5 years ago

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.