Amphtml: amp-social-share causes layout shift

[kevinkimball]

What's the issue?

amp-social-share causes layout shift when viewed on platforms that do not support system sharing

How do we reproduce the issue?

Add an amp-social-share component with type="system" . If system sharing is not supported, the element hides itself, causing layout shift

Example:

https://www.terra.com.br/amp/noticias/brasil/politica/janaina-diz-que-ve-risco-de-bolsonaro-nao-terminar-mandato,c75584c59cf271f728458dfc04cc2caemjijutop.html

What browsers are affected?

Browsers that do not support system sharing

Which AMP version is affected?

2003031842100 , but believe this has always been an issue

[kevinkimball]

/cc @ampproject/wg-ui-and-a11y

[caroqliu]

Discussed in design review #27073 with the following resolutions:

• Turn on prerender (done by #27533)
• Do UA-based cache SSR (blocked/infeasible for now)
• Implement a better v2 API

Discussed further with @ampproject/wg-bento with the following additional resolution points:

• We can modify the WebShare API not-supported behavior without a version bump to fix many existing pages with layout shift:
  
  
  
  • Current behavior: If Webshare API is not supported for an amp-social-share[type=system] instance, it hides itself.
  
  
  • @dvoytenko proposed behavior: If WebShare API is not supported for an amp-social-share[type=system] instance, redirect endpoint from navigator: to mailto:. This means it will essentially behave as type=[email] with its data-param-text attribute forwarded to the email's data-param-subject attribute.
    
    
    
    
    
    • As an additional point here, the attemptCollapse strategy discussed in design review may become viable as an intermediary step before falling back to the mailto: endpoint.
    
    
    
  
  
• The WebShare API supported with data-mode=replace behavior requires further work:
  
  
  
  • In the short term we can file an intent to deprecate data-mode=replace (low usage as of today) because it is fundamentally not in the spirit of core web vitals
  
  
  • In the long term design a grouping component that can behave roughly as follows: Display a single button for sharing. If WebShare API is supported, trigger that. Otherwise turn into a click-to-expand/dropdown/slide-out experience that displays other amp-social-share instances.
  
  

cc @krdwan @wassgha @ampproject/wg-ui-and-a11y

[kristoferbaxter]

I'm all for removing the data-mode=replace functionality.