ampproject / ampproject/amphtml

amp-social-share causes layout shift on upgrade

Open
#30,649 4 comments 0 reactions 0 assignees View on GitHub
Component: amp-social-share P1: High Priority Stale Type: Bug WG: components
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.