[Bug] 0.76 - border-radius with non-integer values causes faded bottom padding
Personne n'a encore pris cette issue.
- Langage dominant
- C++
- Étoiles
- 127k
- Forks
- 25.3k
- Merge moyen
- 1 j 23 h
- PR mergées (30 j)
- 4
Description
Description
I have just updated to RN 0.76 and seeing some weird behavior with non integer values when applying corner radius. It creates a bottom padding that has a faded color.
Steps to reproduce
Create a simple view and apply the following values:
return (
<View className="h-full bg-indigo-900 p-4">
<View
style={{
marginVertical: 400,
borderTopLeftRadius: 10,
borderTopRightRadius: 10,
backgroundColor: 'white',
padding: 14,
}}
/>
</View>
The output should look like this:
But instead it looks like this:
React Native Version
0.76.0
Affected Platforms
Runtime - iOS
Output of npx react-native info
System:
OS: macOS 15.0.1
CPU: (11) arm64 Apple M3 Pro
Memory: 223.63 MB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.13.1
path: ~/.local/share/mise/installs/node/20/bin/node
Yarn:
version: 4.5.1
path: ~/.local/share/mise/installs/node/20/bin/yarn
npm:
version: 10.5.2
path: ~/.local/share/mise/installs/node/20/bin/npm
Watchman:
version: 2024.10.21.00
path: /opt/homebrew/bin/watchman
Managers:
CocoaPods:
version: 1.15.2
path: /Users/osp/.local/share/mise/installs/ruby/3/bin/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 24.0
- iOS 18.0
- macOS 15.0
- tvOS 18.0
- visionOS 2.0
- watchOS 11.0
Android SDK:
API Levels:
- "33"
- "34"
- "35"
Build Tools:
- 30.0.3
- 33.0.0
- 33.0.1
- 34.0.0
- 35.0.0
- 35.0.0
System Images:
- android-33 | Google Play ARM 64 v8a
Android NDK: 26.1.10909125
IDEs:
Android Studio: 2024.2 AI-242.23339.11.2421.12483815
Xcode:
version: 16.0/16A242d
path: /usr/bin/xcodebuild
Languages:
Java:
version: 21.0.3
path: /usr/bin/javac
Ruby:
version: 3.3.1
path: /Users/osp/.local/share/mise/installs/ruby/3/bin/ruby
npmPackages:
"@react-native-community/cli":
installed: 15.0.0
wanted: ^15.0.0
react:
installed: 18.3.1
wanted: 18.3.1
react-native:
installed: 0.76.0
wanted: 0.76.0
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: false
newArchEnabled: false
iOS:
hermesEnabled: Not found
newArchEnabled: Not found
Stacktrace or Logs
*
Reproducer
https://github.com/ospfranco/border-radius-bug
Screenshots and Videos
No response
Guide de contribution
Ouvrir le guide de contribution
Par où commencer
- Lisez l'issue en entier, puis le guide de contribution du projet.
- Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
- Forkez le dépôt et travaillez sur une branche.
- Ouvrez une pull request qui référence le numéro de l'issue.
Piste de recherche
Commencez par exécuter le reproducer lié du bug border-radius sur iOS avec React Native 0.76.0 et comparez sa sortie avec les captures d’écran attendues et réelles. Suivez le chemin de rendu iOS pour les valeurs non entières de border-radius, puis vérifiez que le padding inférieur estompé n’apparaît plus, tandis que l’exemple fourni continue de s’afficher correctement.
Rédigé par le modèle d'indexation à partir du texte de l'issue.
Évaluation
- Stack technique
- react-native
- Domaine
- mobile
- Type d'issue
- Bug
- Difficulté
- 4/5
- Temps estimé
- 3-5 jours
- Activité
- À l'abandon
- Clarté
- Plutôt claire
- Accessibilité débutants
- 38/100