meliorence / react-native-render-html

iOS/Android pure javascript react-native component that renders your HTML into 100% native views
https://meliorence.github.io/react-native-render-html/
BSD 2-Clause "Simplified" License
3.48k stars 589 forks source link

border-radius broken in 6.x for images #582

Closed winrid closed 1 year ago

winrid commented 2 years ago

Decision Table

Good Faith Declaration

Description

I could not find this bug report for 6.x, so filing it.

The following HTML does not result in border-radius being respected in 6.x:

<img style="display: inline-block; width: 40px; height: 40px; border-radius: 40px; overflow: hidden;" src="https://staticm.fastcomments.com/1639362726066-DSC_0841.JPG" />
<div style="position: relative; width: 20px; height: 20px; border-radius: 20px; overflow: hidden;"><img style="width: 40px; height: 40px; object-fit: cover" alt="what" src="https://staticm.fastcomments.com/1639362726066-DSC_0841.JPG" /></div>

Using:

    "react-native-render-html": "^6.3.4",

5.x works fine:

    "react-native-render-html": "^5.1.1",

Also note that for a regular div, with a background, border-radius works. However, once you add an image inside it does not.

React Native Information

System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 AMD Ryzen 7 2700X Eight-Core Processor
    Memory: 32.14 GB / 63.95 GB
  Binaries:
    Node: 18.8.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.18.0 - C:\Program Files\nodejs\npm.CMD
    Watchman: Not Found
  SDKs:
    Android SDK: Not Found
    Windows SDK:
      AllowDevelopmentWithoutDevLicense: Enabled
      AllowAllTrustedApps: Enabled
      Versions: 10.0.19041.0
  IDEs:
    Android Studio: Version  3.5.0.0 AI-191.8026.42.35.6010548
    Visual Studio: 16.11.32002.261 (Visual Studio Community 2019)
  Languages:
    Java: 17.0.1 - C:\Program Files\Common Files\Oracle\Java\javapath\javac.EXE
  npmPackages:
    @react-native-community/cli: Not Found
    react: 18.0.0 => 18.0.0
    react-native: ^0.69.4 => 0.69.4
    react-native-windows: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

RNRH Version

6.3.4

Tested Platforms

Reproduction Platforms

Minimal, Reproducible Example

<RenderHtml source={{html: '<img style="display: inline-block; width: 40px; height: 40px; border-radius: 40px; overflow: hidden;" src="https://staticm.fastcomments.com/1639362726066-DSC_0841.JPG" />'}} contentWidth={width}/>

Additional Notes

5.x works

dnizetic commented 1 year ago

Any updates on this?