`enableExperimentalPercentWidth` on Windows does not preserve image ratio

gaetandezeiraud commented 3 years ago

Decision Table

[X] My issue does not look like “The HTML attribute 'xxx' is ignored” (unless we claim support for it)
[X] My issue does not look like “The HTML element <yyy> is not rendered”

Good Faith Declaration

[X] I have read the HELP document here: https://git.io/JBi6R
[X] I have read the CONTRIBUTING document here: https://git.io/JJ0Pg
[X] I have confirmed that this bug has not been reported yet

Description

I have set enableExperimentalPercentWidth to true and style with the tagsStyles the image width width: '90%'. But how I can conserve the image ratio? For the height.

I think it is because of height and width on the tag. But don't found a way to disable it. But not sure. objectFit or resizeMode don't help.

React Native Information

info Fetching system and libraries information...
System:
    OS: Windows 10 10.0.19043
    CPU: (8) x64 Intel(R) Core(TM) i5-9300HF CPU @ 2.40GHz
    Memory: 1.03 GB / 7.92 GB
  Binaries:
    Node: 14.17.6 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.5 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 7.21.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.16299.0, 10.0.17763.0, 10.0.18362.0, 10.0.19041.0
  IDEs:
    Android Studio: Version     2020.3.0.0 AI-203.7717.56.2031.7678000
    Visual Studio: 16.11.31702.278 (Visual Studio Community�2019)
  Languages:
    Java: Not Found
  npmPackages:
    @react-native-community/cli: Not Found
    react: 17.0.2 => 17.0.2
    react-native: 0.65.0 => 0.65.0
    react-native-windows: 0.65.2 => 0.65.2
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

6.1.0

Tested Platforms

[ ] Android
[ ] iOS
[ ] Web
[ ] MacOS
[X] Windows

Reproduction Platforms

[ ] Android
[ ] iOS
[ ] Web
[ ] MacOS
[X] Windows

Minimal, Reproducible Example

https://github.com/Brouilles/renderhtml-image-reproduction

Additional Notes

No response

jsamr commented 3 years ago

@Brouilles Sorry about the delays, I'll get into this before next week!

jsamr commented 3 years ago

@Brouilles I have not forgotten you! Still busy with 6.2 refinements and blog post, but I will take a dive after that.

jsamr commented 2 years ago

@Brouilles Thanks again for your report and sorry for my late response! I could reproduce the issue with this minimal example (this is actually minimal, just one tag to render):

import React from 'react';
import {StyleSheet, ScrollView, useWindowDimensions} from 'react-native';

import {Colors} from 'react-native/Libraries/NewAppScreen';
import {MixedStyleRecord, RenderHTML} from 'react-native-render-html';

const renderersProps = {
  img: {
    enableExperimentalPercentWidth: true,
  },
};

const tagsStyles: MixedStyleRecord = {
  img: {
    width: '100%',
  },
};

const htmlToConvert = `
<img
    src="https://www.halo.fr/wp-content/uploads/2021/09/haloinfinite_fragmentation_01_watermarked_1920x1080.jpg"
    alt=""
    width="750"
    height="422"
/>
 `;

const App = () => {
  const {width} = useWindowDimensions();

  return (
    <ScrollView
      contentInsetAdjustmentBehavior="automatic"
      style={styles.scrollView}>
      <RenderHTML
        contentWidth={width}
        renderersProps={renderersProps}
        source={{html: htmlToConvert}}
        tagsStyles={tagsStyles}
        enableCSSInlineProcessing={false}
      />
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    flex: 1,
    backgroundColor: Colors.lighter,
  },
  body: {
    backgroundColor: Colors.white,
  },
});

export default App;

The aspect ratio is back to normal when we either:

remove the height attribute on the img tag
remove width: '100%' style
remove enableExperimentalPercentWidth: true

I am going to implement regression tests and provide a fix.

jsamr commented 2 years ago

@Brouilles I tested the minimal example that I had created in a web browser, and actually I found this library behavior being very close. This HTML:

<img
    src="https://www.halo.fr/wp-content/uploads/2021/09/haloinfinite_fragmentation_01_watermarked_1920x1080.jpg"
    alt=""
    width="750"
    height="422"
    style="width: 100%;object-fit: cover;"
/>

Renders in a 400x600 Firefox windows with no body margins like this:

Capture d’écran 2021-11-25 à 10 56 27

If we remove object-fit: cover, it is instead stretched:

Capture d’écran 2021-11-25 à 10 59 04

In the end, the resolved box model for the image element is:

width: '100%' from the inline style;
height: 422 from the height attribute.

So the only differences with this library is that:

By default, images are scaled down to fit the container when necessary. This behavior is controlled by computeEmbeddedMaxWidth.
By default, images have an object-fit: contain resize behavior instead of object-fit: fill.

What you were trying to achieve, is to override the height from the attribute. And indeed, the behavior you are looking for can be achieved in a browser with height: auto:

<img
    src="https://www.halo.fr/wp-content/uploads/2021/09/haloinfinite_fragmentation_01_watermarked_1920x1080.jpg"
    alt=""
    width="750"
    height="422"
    style="width: 100%; height: auto;"
/>

Unfortunately, our CSS processor doesn't yet understand such keywords. I suggest you submit a feature request to bring support for inherit, auto, initial, unset... etc. See https://native-html.canny.io/features I am going to close now, as it appears this issue is caused by a limitation of the CSS engine and will be best tracked in our feature tracker, but the legitimacy for such feature remains.

meliorence / react-native-render-html