This repository has been archived by the owner on Aug 13, 2023. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 54
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
greenc05
added
the
a11y-swarm
An a11y swarm (clarify dev or full team in the desc) needs to be carried out before moving to test
label
Nov 12, 2019
…content-shift-blocker merge
…content-shift-blocker
…content-shift-blocker merge
…content-shift-blocker
1 task
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Labels
a11y-swarm
An a11y swarm (clarify dev or full team in the desc) needs to be carried out before moving to test
ws-home
Tasks for the WS Home Team
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.
Resolves #2279
Overall change: Adds a component that can wrap content such as ads to detect and mitigate content shifting. For more info refer to the README.md
Above is the Storybook story. To test and showcase the component we have here content that loads a new, different sized image every few seconds. The green shows where the browser repainted sections of the screen as a result of the image changing and causing content reflows. You can see from this example that the content within the wrapper will never resize when in view and hide any overflow of the content within. When it is not in view the wrapper and it's content is allowed to resize and the scroll position is adjusted so the user will not experience any unexpected jumps.
Code changes:
NB
Testing notes
Needs tested in all browsers. Can be tested in Storybook.