search

Automattic / wp-calypso

The JavaScript and API powered WordPress.com
https://developer.wordpress.com
GNU General Public License v2.0
12.42k stars 1.99k forks source link

SVG images: Unsupported file format served to mobile #48498

Open mindgraffiti opened 3 years ago

mindgraffiti commented 3 years ago

iOS and Android devices do not have the ability to display .svg images natively. In the REST API response received by mobile devices, .svg files are often delivered to display twemoji. This is not limited to Comment Notifications only, but this is the area where it is most noticeable.

On WordPress iOS a gray box appears. On WordPress Android, we display nothing at all.

Steps to reproduce

  1. Starting at URL: pbMoDN-1Hg-p2#comment-3428
  2. Pick a mobile device and install the WordPress app.
  3. On the web, follow Apps P2
  4. On the device, go to Reader > Following and select "Filter".
  5. In the site filter, scroll to The Apps Division and select it.
  6. Scroll through the posts until you find "Welcome David!"
  7. Press the Comments button (speech balloon icon)
  8. Scroll to Gerardo's comment.

API response snippet:

"content": "<p><!-- wp:paragraph --></p>\n<p>Welcome <a href='https://appsp2.wordpress.com/mentions/davidcalhoun/' class='mention'><span class='mentions-prefix'>@</span>davidcalhoun</a>! <img role=\"img\" class=\"emoji\" alt=\"🎉\" src=\"https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f389.svg\"/><img role=\"img\" class=\"emoji\" alt=\"🎉\" src=\"https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f389.svg\"/></p>\n<p><!-- /wp:paragraph --></p>\n",
  "raw_content": "<!-- wp:paragraph -->\n<p>Welcome @davidcalhoun! <img role=\"img\" class=\"emoji\" alt=\"🎉\" src=\"https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f389.svg\"><img role=\"img\" class=\"emoji\" alt=\"🎉\" src=\"https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f389.svg\"></p>\n<!-- /wp:paragraph -->",

What I expected

A supported image file format was returned in the HTML found in the "content" field. Mobile devices support .jpg and .png.

What happened instead

.svg files are supplied.

Browser / OS version

Any. The mobile apps are using /rest/v1.1/sites/$hostname/comments/$comment_id as the endpoint to call.

Screenshot / Video

Context / Source

Ref. https://github.com/wordpress-mobile/WordPress-iOS/issues/15341 Ref. https://github.com/Automattic/wp-calypso/issues/47807

synora commented 3 years ago

Mobile Web, API, Notifications, Comments, and Bug labels added.