Fix flickering effect when changing tabs #7904
Conversation
sfc-gh-lmasuch
changed the title
sfc-gh-lmasuch
changed the title
| @@ -136,8 +136,7 @@ export const StyledVerticalBlock = styled.div<StyledVerticalBlockProps>( | |||
| ({ width, theme }) => ({ | |||
| width, | |||
| position: "relative", // Required for the automatic width computation. | |||
|
|
|||
| display: "flex", | |||
| display: width === 0 ? "none" : "flex", | |||
There was a problem hiding this comment.
I think we might not even need it. But I think in any case, if the width of a vertical container is 0, we should better not display the container. So, it might be a good precaution for undetected issues.
There was a problem hiding this comment.
I'm lukewarm to this, I guess the issues that could pop up is "my content is not displayed" vs "my content flickers or is mislayout". I think it's probaly good enough.
There was a problem hiding this comment.
Good point. Yeah, I think it could make some of the very edge cases harder to detect. I have removed this again. If we see some related flickering in the future, we could decide to add this again.
| @@ -136,8 +136,7 @@ export const StyledVerticalBlock = styled.div<StyledVerticalBlockProps>( | |||
| ({ width, theme }) => ({ | |||
| width, | |||
| position: "relative", // Required for the automatic width computation. | |||
|
|
|||
| display: "flex", | |||
| display: width === 0 ? "none" : "flex", | |||
There was a problem hiding this comment.
I'm lukewarm to this, I guess the issues that could pop up is "my content is not displayed" vs "my content flickers or is mislayout". I think it's probaly good enough.
* Fix flickering effects * Remove display none
Describe your changes
I don't know when and why the width == 0 flicker problem returned (could be related to this or this change or some browser changes). It seems to happen a bit more randomly:
Screen.Recording.2024-01-04.at.21.09.46.mov
The fixes in this PR seem to prevent this flickering fully.
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.