Wordpress-ios: Comments: HTML images with no size attributes look blown up

[mindgraffiti]

Ref. pbArwn-1v1-p2#comment-2201

When a comment uses an unconstrained image from an HTML image tag, they grow to fill the screen. This causes overly-large images that are out of focus and don't fit the screen resolution.

A possible solution to this is to check the image size before rendering. Look into NotificationMediaDownloader.resizeMediaWithIncorrectSize or WordPress/Classes/Utility/Image Dimension Parser/ImageDimensionFetcher.swift for possible solutions.

Sample snippet of HTML from the Comment content field, on its own line:

\n<p>Bayes Rule says that:</p>\n<p><!-- /wp:paragraph --></p>\n<p><!-- wp:paragraph --></p>\n<p><img src=\"https://s0.wp.com/latex.php?latex=P%28Y%7CX%29+%3D+%5Cfrac%7BP%28X%7CY%29P%28Y%29%7D%7BP%28X%29%7D&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"P(Y|X) = &#92;frac{P(X|Y)P(Y)}{P(X)}\" title=\"P(Y|X) = &#92;frac{P(X|Y)P(Y)}{P(X)}\" class=\"latex\" /></p>\n<p><!-- /wp:paragraph --></p>\n

Sample snippet of HTML from the Comment content field, inline LaTeX:

but here&#8217;s my understanding of the problem: you want to measure how a certain event (<img src=\"https://s0.wp.com/latex.php?latex=X&;bg=ffffff&;fg=000&;s=0&;c=20201002\" alt=\"X\" title=\"X\" class=\"latex\" />, e.g. replying to a comment) will influence an outcome (<img src=\"https://s0.wp.com/latex.php?latex=Y&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"Y\" title=\"Y\" class=\"latex\" />, e.g. being active in November), which is the probability of Y happening given that you know X (<img src=\"https://s0.wp.com/latex.php?latex=P%28Y%7CX%29&#038;bg=ffffff&#038;fg=000&#038;s=0&#038;c=20201002\" alt=\"P(Y|X)\" title=\"P(Y|X)\" class=\"latex\" />). 

Expected behavior

When a user leaves a comment that uses LaTeX, the generated image(s) should be sized to meet the device's resolution.

Actual behavior

When an image is generated from LaTeX, there are no size attributes in the HTML image tag to use for constraining the image in the Comments view.

Steps to reproduce the behavior

1. Leave a comment with inline LaTex.
2. Leave a comment that uses LaTeX on its own line.
3. Navigate to Reader > Followed site > post > comments. The image is blurry and huge.

Tested on iPhone 11 Pro, iOS 14.3, WPiOS 16.4

[koke]

I just got a stalebot ping that reminded me of this old related issue https://github.com/wordpress-mobile/WordPress-iOS/issues/13135

[aerych]

@mindgraffiti was this one resolved in https://github.com/wordpress-mobile/WordPress-iOS/pull/15503? Shall we close it?

[mindgraffiti]

@aerych sadly, no. #15503 was scoped to address emoji / twemoji only, and doesn't fix this particular scenario. However I'm closing this issue in favor of #13135.