Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Select] Scrolling causes options to scroll away #8924

Closed
taysonvo opened this issue Dec 11, 2017 · 5 comments · Fixed by #9446
Closed

[Select] Scrolling causes options to scroll away #8924

taysonvo opened this issue Dec 11, 2017 · 5 comments · Fixed by #9446
Assignees
@crisbeto
Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Comments

@taysonvo
Copy link

Bug, feature request, or proposal:

image

What is the expected behavior?

It should scroll but should inside the content.

What is the current behavior?

Running out of the content, PSA.

What are the steps to reproduce?

  1. go to: https://material.angular.io/components/select/examples
  2. Just click on the arrow to dropped down the Options.
  3. Use mouse and scroll down the page and see the Options running out of the content.

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

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

Is there anything else we should know?
@andrewseguin andrewseguin changed the title Mat select option is running out of content when scrolling [Select] Scrolling causes options to scroll away Dec 12, 2017
@andrewseguin
Copy link
Contributor

Cannot reproduce - scrolling doesn't work with the mousewheel and clicking on the scrollbar makes the options disappear. What OS are you using?

@andrewseguin andrewseguin added the cannot reproduce The team is unable to reproduce this issue with the information provided label Dec 12, 2017
@jelbourn jelbourn assigned crisbeto and unassigned jelbourn Dec 12, 2017
@taysonvo
Copy link
Author

Hi @andrewseguin,
Im using Firefox browser on Windows 10.

@expectpin
Copy link

Same here. Using Firefox 57.0.2 on Windows 7.

@crisbeto crisbeto added P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent and removed cannot reproduce The team is unable to reproduce this issue with the information provided labels Jan 16, 2018
@crisbeto
Copy link
Member

I managed to reproduce it now as well. It looks like Firefox doesn't block the scroll event for overlays with a transparent background.

crisbeto added a commit to crisbeto/material2 that referenced this issue Jan 17, 2018
@crisbeto
fix(overlay): transparent overlay not blocking scroll on Firefox 57
6d9fea2 
As of Firefox 57, it looks like elements with a transparent background won't capture scroll events. These changes work around the issue by not setting the background color, but using `opacity` to hide the element while keeping it scrollable.

Fixes angular#8924.
@crisbeto crisbeto mentioned this issue Jan 17, 2018
Merged
jelbourn pushed a commit that referenced this issue Jan 20, 2018
@crisbeto @jelbourn
fix(overlay): transparent overlay not blocking scroll on Firefox 57
2529ffb 
As of Firefox 57, it looks like elements with a transparent background won't capture scroll events. These changes work around the issue by not setting the background color, but using `opacity` to hide the element while keeping it scrollable.

Fixes #8924.
jelbourn pushed a commit that referenced this issue Jan 23, 2018
@crisbeto @jelbourn
fix(overlay): transparent overlay not blocking scroll on Firefox 57 (#…
d0ad3b7 
…9446)

As of Firefox 57, it looks like elements with a transparent background won't capture scroll events. These changes work around the issue by not setting the background color, but using `opacity` to hide the element while keeping it scrollable.

Fixes #8924.
jelbourn pushed a commit to jelbourn/components that referenced this issue Jan 29, 2018
@crisbeto @jelbourn
fix(overlay): transparent overlay not blocking scroll on Firefox 57 (a…
e2999a8 
…ngular#9446)

As of Firefox 57, it looks like elements with a transparent background won't capture scroll events. These changes work around the issue by not setting the background color, but using `opacity` to hide the element while keeping it scrollable.

Fixes angular#8924.
@angular-automatic-lock-bot
Copy link

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 8, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@crisbeto crisbeto

Labels
P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(overlay): transparent overlay not blocking scroll on Firefox 57 crisbeto/material2
5 participants
@jelbourn @crisbeto @expectpin @taysonvo @andrewseguin