react / react/react-native

Children inherit parent's properties when parent has boxShadow + scale + overflow:hidden

Open
#54,612 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Flow Issue: Author Provided Repro Needs: React Native Team Attention
Dominant language
C++
Stars
127k
Forks
25.3k
Avg merge
1d 23h
Merged PRs (30d)
4

Description

Description

When a parent View has all three of these properties:

  • boxShadow
  • transform: [{ scale }] ← Required to trigger the bug
  • overflow: 'hidden'

Children incorrectly inherit the parent's borderRadius and scale transform(and others properties if set), even though these properties should not be inherited.

Additional Context

Removing any one of these properties makes the bug disappear

  • Removing overflow: 'hidden' makes the bug disappear
  • Removing boxShadow makes the bug disappear
  • Removing transform: scale makes the bug disappear

Everything works great on Android

Steps to reproduce
  1. Create a parent View with these exact properties:
    overflow: 'hidden'
    boxShadow: ...
    transform: [{ scale: ... }]
  2. Create a child View inside the parent with:
    borderRadius: 0 (should be square)
  3. Run the app on iOS/tvOS
React Native Version

0.81.4

Affected Platforms

Build - MacOS

Output of npx @react-native-community/cli info
System:
  OS: macOS 26.1
  CPU: (11) arm64 Apple M3 Pro
  Memory: 161.42 MB / 36.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 22.18.0
    path: ~/.nvm/versions/node/v22.18.0/bin/node
  Yarn: Not Found
  npm:
    version: 10.9.3
    path: ~/.nvm/versions/node/v22.18.0/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 25.1
      - iOS 26.1
      - macOS 26.1
      - tvOS 26.1
      - visionOS 26.1
      - watchOS 26.1
  Android SDK:
    API Levels:
      - "34"
      - "35"
      - "36"
    Build Tools:
      - 34.0.0
      - 35.0.0
      - 36.0.0
    System Images:
      - android-30 | Android TV Intel x86 Atom
      - android-34 | Android TV ARM 64 v8a
      - android-34 | Android TV Intel x86 Atom
      - android-34 | Google APIs ARM 64 v8a
      - android-35 | Google Play ARM 64 v8a
    Android NDK: Not Found
IDEs:
  Android Studio: 2024.1 AI-241.19072.14.2412.12360217
  Xcode:
    version: 26.1.1/17B100
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 17.0.13
    path: /opt/homebrew/opt/openjdk@17/bin/javac
  Ruby:
    version: 3.4.1
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli": Not Found
  react: Not Found
  react-native: Not Found
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: true
iOS:
  hermesEnabled: true
  newArchEnabled: true
Stacktrace or Logs
no crash
MANDATORY Reproducer

https://snack.expo.dev/@annaryb/graceful-indigo-pizza

Screenshots and Videos
IOS bug ANDROID no bug
Image Image

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by running the mandatory Snack reproducer on iOS or tvOS, then compare its output with Android while varying boxShadow, scale, and overflow:hidden. No source files or tests are named in the issue. Done means the child View no longer inherits the parent's borderRadius or scale under the reported combination, without regressing the other platforms.

Written by the indexing model from the issue text.

Assessment

Tech stack
react-native
Domain
mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.