angular / angular/components

getRtlScrollAxisType detects incorrect RtlScrollAxisType for chrome

Open
#28,209 3 comments 0 reactions 0 assignees View on GitHub
area: cdk/scrolling needs investigation P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

_No response_

### Description

I recently upgraded to Angular ~16.2.10, and noticed that cdk-virtual-scroll-viewport is not working in RTL mode for horizontal scroll. Initial data is rendered but then on scroll subsequent records are not rendered.

On investigations I came to know that getRtlScrollAxisType is returning 2 (Inverted) instead of 1 (Negated). If I make it return 1 during debug, things start to work fine.

### Reproduction

StackBlitz link: https://stackblitz.com/edit/angular-yehn5j?file=src%2Fapp%2Fcdk-platform-overview-example.html
Steps to reproduce:
Notice that at the bottom of information, getRtlScrollAxisType is 2
![image](https://github.com/angular/components/assets/17024937/4e9b569d-82a9-4d99-b437-d94b9d2faeac)

### Expected Behavior

getRtlScrollAxisType() should return 1 for chrome.

### Actual Behavior

getRtlScrollAxisType() returns 2 for chrome

### Environment

- Angular: ~16.2.10
- CDK/Material: ~16.2.10
- Browser(s): Chrome 119.0.6045.160, Chrome 119.0.6045.200
- Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 Pro

Contributor guide

Open the contributing guide

Research direction

Start by locating getRtlScrollAxisType in the CDK platform or scrolling code and reproduce the RTL horizontal scrolling failure using the linked StackBlitz example in Chrome. Verify the detected axis type and confirm that cdk-virtual-scroll-viewport renders subsequent records correctly while preserving behavior in other supported browsers.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.