ampproject / ampproject/amphtml
amp-social-share causes layout shift on upgrade
- Dominant language
- JavaScript
- Stars
- 14.9k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
## What's the issue?
When `.i-amphtml-unresolved` class is removed on component upgrade, overflow is changed from `hidden` to `visible`, which causes subsequent elements to shift (both sibling inline element and following image).
This issue was surfaced by this issue from the Page Experience tool (https://github.com/ampproject/wg-performance/issues/48).
This may be related to https://github.com/ampproject/amphtml/issues/27228 but `data-mode=replace` is not used in the example.
## How do we reproduce the issue?
Visit the URL below with "Layout Shift Regions" enabled in Rendering tab of Chrome Dev Tools to visualize the layout shift.
https://tasty.co/amp/recipe/garlic-bread-bruschetta
## What browsers are affected?
Chrome 87
## Which AMP version is affected?
2009252320001
Contributor guide
Research direction
Reproduce the layout shift at the tasty.co AMP URL with Chrome DevTools' Layout Shift Regions enabled, then inspect the amp-social-share upgrade path where `.i-amphtml-unresolved` is removed. Done means upgrading the component no longer shifts the sibling inline element or following image when overflow changes.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100