Skip to content

Stabilize the scrolling behavior#2959

Merged
PorterNan merged 21 commits intomainfrom
jinan/fix-scroll-anchor
Apr 25, 2023
Merged

Stabilize the scrolling behavior#2959
PorterNan merged 21 commits intomainfrom
jinan/fix-scroll-anchor

Conversation

@PorterNan
Copy link
Copy Markdown
Contributor

@PorterNan PorterNan commented Apr 20, 2023 •
edited
Loading

What

Stabilize the scrolling behavior

  • Add timestamp+displayName as key to each caption element so react can always find the same element and render into those
  • Add overflow-anchor:auto to each element, so any on screen caption will be an anchor for scrolling position when adding/removing elements

Demo:
In the video, we scrolled into an element in the middle of captions list, and you can see it is anchored when we adding new element at the bottom and removing element from the top (yes we have more than 50 elements)
And it is anchored all the way to the top, until the anchor element is popping out of the stack of all captions.

caption_banner_scrolling.mp4

Why

How Tested

Process & policy checklist

  • I have updated the project documentation to reflect my changes if necessary.
  • I have read the CONTRIBUTING documentation.

Is this a breaking change?

  • This change causes current functionality to break.

@PorterNan PorterNan requested review from a team as code owners April 20, 2023 04:36
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 20, 2023 •
edited
Loading

Calling bundle size is increased❗.

  • Current size: 9797300
  • Base size: 9797183
  • Diff size: 117

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 20, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-tfhbgymnrx.chromatic.com/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 20, 2023 •
edited
Loading

Chat bundle size is increased❗.

  • Current size: 9839649
  • Base size: 9839531
  • Diff size: 118

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 20, 2023 •
edited
Loading

CallWithChat bundle size is increased❗.

  • Current size: 10191324
  • Base size: 10191207
  • Diff size: 117

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 20, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-nxbkrhwvpl.chromatic.com/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 20, 2023

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Failed to pass the composite UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-dowyoasnlm.chromatic.com/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-smpjiioicw.chromatic.com/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Failed to pass the composite UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

@PorterNan PorterNan added the update_snapshots Set this label to request automated update of UI snapshots label Apr 21, 2023
@github-actions github-actions Bot removed the update_snapshots Set this label to request automated update of UI snapshots label Apr 21, 2023
PorterNan
PorterNan commented Apr 21, 2023
View reviewed changes
Copy link
Copy Markdown
Contributor Author

@PorterNan PorterNan left a comment

Choose a reason for hiding this comment

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

Because this PR also changes how we deserialize json, so Date type is converted correctly in error bar - we need to update error bar state to make sure it is always right in this case

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-uuvcspioze.chromatic.com/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-zjxyotcvoj.chromatic.com/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-khouqnepec.chromatic.com/

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Failed to pass the UI Test. If this PR is for UI change and the error is snapshot mismatch, please add "update_snapshots" label to the PR for updating the snapshot.

@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 21, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-rjcarbnniw.chromatic.com/

@PorterNan
Merge branch 'main' into jinan/fix-scroll-anchor
fda1f56 
Signed-off-by: Porter Nan <jiangnanhello@live.com>
@PorterNan PorterNan enabled auto-merge (squash) April 25, 2023 15:59
@github-actions
Copy link
Copy Markdown
Contributor

github-actions Bot commented Apr 25, 2023

Storybook URL https://60c7ae6891f0e90039d7cd54-mvjdplchpd.chromatic.com/

@PorterNan PorterNan merged commit 5011391 into main Apr 25, 2023
@PorterNan PorterNan deleted the jinan/fix-scroll-anchor branch April 25, 2023 16:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dmceachernmsft dmceachernmsft dmceachernmsft approved these changes

@carocao-msft carocao-msft carocao-msft approved these changes

@JamesBurnside JamesBurnside Awaiting requested review from JamesBurnside JamesBurnside is a code owner automatically assigned from Azure/acs-ui-web-calling-reviewer-1

@alkwa-msft alkwa-msft Awaiting requested review from alkwa-msft alkwa-msft is a code owner automatically assigned from Azure/acs-ui-web-calling-reviewer-1

@edwardlee-msft edwardlee-msft Awaiting requested review from edwardlee-msft edwardlee-msft is a code owner automatically assigned from Azure/acs-ui-web-calling-reviewer-1

@mgamis-msft mgamis-msft Awaiting requested review from mgamis-msft mgamis-msft is a code owner automatically assigned from Azure/acs-ui-web-calling-reviewer-2

@prabhjot-msft prabhjot-msft Awaiting requested review from prabhjot-msft prabhjot-msft is a code owner automatically assigned from Azure/acs-ui-web-calling-reviewer-2

@AmyL219 AmyL219 Awaiting requested review from AmyL219 AmyL219 is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-1

@jimchou-dev jimchou-dev Awaiting requested review from jimchou-dev jimchou-dev is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-1

@vhuseinova-msft vhuseinova-msft Awaiting requested review from vhuseinova-msft vhuseinova-msft is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-1

@Leah-Xia-Microsoft Leah-Xia-Microsoft Awaiting requested review from Leah-Xia-Microsoft Leah-Xia-Microsoft is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-1

@jpeng-ms jpeng-ms Awaiting requested review from jpeng-ms jpeng-ms is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-1

@waynemo waynemo Awaiting requested review from waynemo waynemo is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-2

@emlynmac emlynmac Awaiting requested review from emlynmac emlynmac is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-2

@JoshuaLai JoshuaLai Awaiting requested review from JoshuaLai JoshuaLai is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-2

@palatter palatter Awaiting requested review from palatter palatter is a code owner automatically assigned from Azure/acs-ui-web-chat-reviewer-2

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@PorterNan @dmceachernmsft @carocao-msft @communication-ui-bot
⚡