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

getRtlScrollAxisType detects incorrect RtlScrollAxisType for safari #14609

Closed
kimjuan opened this issue Dec 22, 2018 · 3 comments · Fixed by #19830
Closed

getRtlScrollAxisType detects incorrect RtlScrollAxisType for safari #14609

kimjuan opened this issue Dec 22, 2018 · 3 comments · Fixed by #19830
Assignees
@devversion
Labels
area: cdk/scrolling P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent safari Issues specific to the Safari desktop browser

Comments

@kimjuan
Copy link

kimjuan commented Dec 22, 2018

What is the expected behavior?

In safari,

getRtlScrollAxisType() === RtlScrollAxisType.NEGATED

What is the current behavior?

getRtlScrollAxisType() returns RtlScrollAxisType.INVERTED

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

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

  • Angular/Angular Material 7.0.4
  • macOS 10.13.6
  • Safari version 12.0.2 (13606.3.4.1.4)

Is there anything else we should know?

Problem unlikely to do with safari and os. Other libraries detected it correctly using feature detection technique
@jelbourn jelbourn assigned mmalerba and unassigned jelbourn Jan 16, 2019
@mmalerba mmalerba added needs triage This issue needs to be triaged by the team area: cdk/scrolling labels May 20, 2020
@mmalerba mmalerba added the safari Issues specific to the Safari desktop browser label May 28, 2020
@devversion
Copy link
Member

devversion commented May 29, 2020 •
edited
Loading

Hello, on my end the RTL scroll axis type is set to NEGATED in Safari (as expected). Can you please provide a reproduction if this is still an issue? Thank you!

This is the demo I used: https://stackblitz.com/edit/angular-yehn5j?file=src/app/cdk-platform-overview-example.ts

Happy to re-open if you can point us to a demo that shows the issue.

@devversion devversion added the cannot reproduce The team is unable to reproduce this issue with the information provided label May 29, 2020
@mmalerba mmalerba removed the needs triage This issue needs to be triaged by the team label Jun 5, 2020
@jbchr
Copy link

jbchr commented Jul 1, 2020

Hey, I can reproduce the issue using the above Stackblitz.

rtlScrollAxisType_safari_bug

MacOs: 10.14.6 (18G2022)
Safari: 13.1.1 (14609.2.9.1.3)

Let me know if I can help anywhere.

@devversion devversion reopened this Jul 1, 2020
@devversion devversion assigned devversion and unassigned mmalerba Jul 1, 2020
@devversion devversion 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 Jul 1, 2020
devversion added a commit to devversion/material2 that referenced this issue Jul 1, 2020
@devversion
fix(cdk/platform): rtl scroll axis incorrectly determined in Safari m…
9144442 
…acOS

In Safari on macOS, the RTL scroll axis is determined incorrectly when
scrollbars are set to `Always Display` as per macOS general system
preferences. Our test element for the scroll axis sets a fixed height.

This is resulting in a vertical scroll bar as the horizontal scroll bar
for testing `scrollLeft` exceeds the scroll containers `1px` height. The
vertical scroll bar then unveils a bug in Webkit where space is acquired
on the right side for the scroll bar (while it's displayed on the left).

This space causes our scroll axis detection to break as the horizontal
`scrollLeft` unexpectedly expands to: `[-scrollWidth, 15px]` while
usually `0px` is the right boundary. We fix this by simply ensuring
that no vertical scroll bar is ever displayed. The vertical scrolling
is not needed for determining the RTL horizontal scroll axis type.

I've reported a bug upstream in Webkit:
https://bugs.webkit.org/show_bug.cgi?id=213851.

Fixes angular#14609.
@devversion devversion mentioned this issue Jul 1, 2020
Merged
mmalerba pushed a commit that referenced this issue Jul 7, 2020
@devversion @mmalerba
fix(cdk/platform): rtl scroll axis incorrectly determined in Safari m…
bf08ba2 
…acOS

In Safari on macOS, the RTL scroll axis is determined incorrectly when
scrollbars are set to `Always Display` as per macOS general system
preferences. Our test element for the scroll axis sets a fixed height.

This is resulting in a vertical scroll bar as the horizontal scroll bar
for testing `scrollLeft` exceeds the scroll containers `1px` height. The
vertical scroll bar then unveils a bug in Webkit where space is acquired
on the right side for the scroll bar (while it's displayed on the left).

This space causes our scroll axis detection to break as the horizontal
`scrollLeft` unexpectedly expands to: `[-scrollWidth, 15px]` while
usually `0px` is the right boundary. We fix this by simply ensuring
that no vertical scroll bar is ever displayed. The vertical scrolling
is not needed for determining the RTL horizontal scroll axis type.

I've reported a bug upstream in Webkit:
https://bugs.webkit.org/show_bug.cgi?id=213851.

Fixes #14609.
mmalerba pushed a commit that referenced this issue Jul 11, 2020
@devversion
fix(cdk/platform): rtl scroll axis incorrectly determined in Safari m…
0ddad07 
…acOS (#19830)

In Safari on macOS, the RTL scroll axis is determined incorrectly when
scrollbars are set to `Always Display` as per macOS general system
preferences. Our test element for the scroll axis sets a fixed height.

This is resulting in a vertical scroll bar as the horizontal scroll bar
for testing `scrollLeft` exceeds the scroll containers `1px` height. The
vertical scroll bar then unveils a bug in Webkit where space is acquired
on the right side for the scroll bar (while it's displayed on the left).

This space causes our scroll axis detection to break as the horizontal
`scrollLeft` unexpectedly expands to: `[-scrollWidth, 15px]` while
usually `0px` is the right boundary. We fix this by simply ensuring
that no vertical scroll bar is ever displayed. The vertical scrolling
is not needed for determining the RTL horizontal scroll axis type.

I've reported a bug upstream in Webkit:
https://bugs.webkit.org/show_bug.cgi?id=213851.

Fixes #14609.
mmalerba pushed a commit that referenced this issue Jul 11, 2020
@devversion @mmalerba
fix(cdk/platform): rtl scroll axis incorrectly determined in Safari m…
09b2ae0 
…acOS (#19830)

In Safari on macOS, the RTL scroll axis is determined incorrectly when
scrollbars are set to `Always Display` as per macOS general system
preferences. Our test element for the scroll axis sets a fixed height.

This is resulting in a vertical scroll bar as the horizontal scroll bar
for testing `scrollLeft` exceeds the scroll containers `1px` height. The
vertical scroll bar then unveils a bug in Webkit where space is acquired
on the right side for the scroll bar (while it's displayed on the left).

This space causes our scroll axis detection to break as the horizontal
`scrollLeft` unexpectedly expands to: `[-scrollWidth, 15px]` while
usually `0px` is the right boundary. We fix this by simply ensuring
that no vertical scroll bar is ever displayed. The vertical scrolling
is not needed for determining the RTL horizontal scroll axis type.

I've reported a bug upstream in Webkit:
https://bugs.webkit.org/show_bug.cgi?id=213851.

Fixes #14609.
@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 Aug 11, 2020
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@devversion devversion

Labels
area: cdk/scrolling P3 An issue that is relevant to core functions, but does not impede progress. Important, but not urgent safari Issues specific to the Safari desktop browser
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(cdk/platform): rtl scroll axis incorrectly determined in Safari macOS devversion/material2
5 participants
@jelbourn @devversion @kimjuan @mmalerba @jbchr