Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Overflow hidden property on View not working #399

Closed
AkshatGiri opened this issue May 19, 2020 · 5 comments
Closed

Overflow hidden property on View not working #399

AkshatGiri opened this issue May 19, 2020 · 5 comments

Comments

@AkshatGiri
Copy link

Issue

Children views overflow parent view even when style property overflow is set to hidden.

Steps to Reproduce

<View style={{backgroundColor: 'red', width: 100, height: 100, overflow: 'hidden'}}>
    <View
        style={{
          backgroundColor: 'blue',
          width: 200,
          height: 200,
          opacity: 0.4,
        }}
    />
</View>

Child view overflows the bounds of the parent view.

image

Expected Behavior

should result in

image

@ghost ghost added the Needs: Triage 🔍 label May 19, 2020
@AkshatGiri
Copy link
Author

AkshatGiri commented May 19, 2020

needs label Partner: Facebook 😄

@tom-un
Copy link
Collaborator

tom-un commented May 22, 2020

@AkshatGiri : This is not an easily solvable issue. Empirically, it is easily fixed by overriding [UIView clipsToBounds] to set self.layer.masksToBounds. However, Apple has documented that the behavior is "undefined" to modify the layer's masksToBounds property (https://developer.apple.com/library/content/releasenotes/AppKit/RN-AppKit/#10_13Layer-backed%20Views) so although it works in macOS (last tested by me in 10.13.4) it could stop working in a future release.

Internally at Microsoft, we had a scenario that called for overflow:hidden on a View that was masking an Image and Text with a circular mask. Android also does not support overflow:hidden (or at least it used to not). Our workaround for Android and macOS was putting the border radius on the Image, and setting the background of the Text to transparent.

Could a similar workaround work for you?

@sahrens
Copy link

sahrens commented May 26, 2020

Setting the border radius on the image no longer works after upgrading to 0.61.38 because the RCTImage is now a subview of the RCTView. We should fix this right away (even if the behavior is technically undefined) since the fix works now and we don't seem to have another options for this critical functionality.

Any idea why this doesn't work out of the box though? Or what the "right way" to solve this is supposed to be?

Also, overflow: 'hidden' works on Android, it's just that the implementation is tricky because the Android platform doesn't support it in the same way.

tom-un pushed a commit that referenced this issue Jun 25, 2020
* Fix overflow:'hidden' github issue #399 (attempt 2)

* Update React/Views/RCTView.m

* Fix comment nit
@appden
Copy link

appden commented Jul 30, 2020

Should this remain open since #457 was merged?

@elicwhite
Copy link
Collaborator

It seems like this should be resolved. @AkshatGiri feel free to reopen if it still repros

HeyImChris added a commit that referenced this issue Sep 8, 2020
* bring over overflow fix to our stable branch

* manually update version for android publish steps
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

5 participants