Fix zoom animation scrollbar #67536
Merged
Fix zoom animation scrollbar #67536
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Keeps it in line with the correct TransitionState type - Separates out computeScrollHeightNext from computeScrollTopNext - Refactors copmuteScrollTopNext to use prev prefixed constants for all transitionFrom values to normalize the naming
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
jeryj
commented
Dec 3, 2024
Comment on lines
+450
to
+453
| transitionToRef.current.scrollHeight = computeScrollHeightNext( | ||
| transitionFromRef.current, | ||
| transitionToRef.current | ||
| ); |
There was a problem hiding this comment.
On first render (previously), transitionToRef did not have a scrollHeight value.
| @@ -47,12 +62,12 @@ function computeScrollTopNext( transitionFrom, transitionTo ) { | |||
| containerHeight: prevContainerHeight, | |||
| frameSize: prevFrameSize, | |||
| scaleValue: prevScale, | |||
| scrollTop, | |||
| scrollHeight, | |||
| scrollTop: prevScrollTop, | |||
There was a problem hiding this comment.
Renamed to keep naming consistent with all transitionFrom values having a prev prefix for clarity.
Comment on lines
-412
to
-414
| transitionFromRef.current.containerHeight = | ||
| transitionFromRef.current.containerHeight ?? | ||
| containerHeight; // Use containerHeight, as it's the previous container height value if none was set. |
There was a problem hiding this comment.
Using the transitionFromRef.current.containerHeight won't be as accurate, as it could have changed from a manual resize between animations. Relying on containerHeight will be more accurate.
|
Size Change: +93 B (+0.01%) Total Size: 1.83 MB
ℹ️ View Unchanged
|
ajlende
reviewed
Dec 3, 2024
| scrollHeight * ( scaleValue / prevScale ) + | ||
| frameSize * 2 - | ||
| containerHeight; | ||
| const maxScrollTop = scrollHeight - containerHeight; |
There was a problem hiding this comment.
Nice! This is a lot more understandable after the refactoring!
ajlende
approved these changes
Dec 3, 2024
|
Thanks for the fix! I have confirmed that the issue has been resolved on Windows OS. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #67360
What?
When animating between zoom levels, we were forcing a scrollbar during the
positioned: fixedpart of the animation to prevent a width snap. However, this assumes the container always has a scrollbar, which isn't true. To fix it, we only add the scrollbar into the frame if necessary.Why?
Improve layout animation when the editor canvas does not have a scrollbar.
How?
scrollHeightis greater than the container (if it is, we force a scrollbar)TransitionStatetype (previously,transitionTodid not have ascrollHeightbuttransitionFromdid.computeScrollHeightNextfromcomputeScrollTopNextcomputeScrollTopNextto useprevprefixed constants for alltransitionFromvalues to normalize the namingTesting Instructions
With scrollbar
With scrollbar
Testing Instructions for Keyboard
Screenshots or screencast