[Shadow] Shadow does not appear if overflow: hidden is set #449

oisinlavery · 2015-03-29T17:46:08Z

iPhone 6, iOS 8.1.1

var TestKit = React.createClass({
  render: function() {
    return (
      <View style={styles.main}>
        <Box/>
      </View>
    );
  }
});

var Box = React.createClass({
  render: function() {
    return (
      <View style={styles.box}></View>
    );
  }
});

var styles = StyleSheet.create({
  main: {
    flex: 1,
    backgroundColor: "#f1f1f1",
    justifyContent: "center",
    alignItems: "center"
  },
  box: {
    height: 100,
    width: 100,
    backgroundColor: "#ffffff",
    borderRadius: 10,
    shadowColor: "#000000",
    shadowOpacity: 0.8,
    shadowRadius: 2,
    shadowOffset: {
      height: 1,
      width: 0
    }
  }
});

vjeux · 2015-03-29T18:18:27Z

cc @sahrens If I remember correctly, it's not rendering shadows for phones that are not good enough and by default the simulator fits that.

novadev94 · 2015-03-29T18:43:02Z

Maybe it's about 64-bit architecture, if that then it's related to: #448

Some images for this, the shadows is rendered fine on 4s, 5 but not 5s and 6:

oisinlavery · 2015-03-29T19:26:55Z

Shadow is NOT visible on iPhone 6

Shadow is visible on:

iPhone 5 Simulator
iPad Retina Simulator
iPad 2 Simulator

Shadow is NOT visible on

iPhone 5s Simulator
iPhone 6 Simulator
iPhone 6+ Simulator
iPad Air Simulator

sahrens · 2015-03-29T21:32:28Z

Our GPU fill-rate gating was only for some specific product code, and was no longer necessary after we switched to assets for shadows instead of the layer properties. There shouldn't be anything in the infra intentionally disabling shadows, probably just some sort of bug - cc @a2, @nicklockwood

That said, I would recommend using assets instead of the shadow properties in general - they tend to perform much better on older devices.

On Mar 29, 2015, at 12:27 PM, Oisin Lavery notifications@github.com wrote:

Shadow is NOT visible on iPhone 6

Shadow is visible on:

iPhone 5 Simulator
iPad Retina Simulator
iPad 2 Simulator
Shadow is NOT visible on

iPhone 5s Simulator
iPhone 6 Simulator
iPhone 6+ Simulator
iPad Air Simulator
—
Reply to this email directly or view it on GitHub.

novadev94 · 2015-03-30T03:35:44Z

The problem is the shadow properties only work on old devices, not the new
ones.

On Monday, March 30, 2015, Spencer Ahrens notifications@github.com wrote:

Our GPU fill-rate gating was only for some specific product code, and was
no longer necessary after we switched to assets for shadows instead of the
layer properties. There shouldn't be anything in the infra intentionally
disabling shadows, probably just some sort of bug - cc @a2, @nicklockwood

That said, I would recommend using assets instead of the shadow properties
in general - they tend to perform much better on older devices.

On Mar 29, 2015, at 12:27 PM, Oisin Lavery <notifications@github.com
javascript:_e(%7B%7D,'cvml','notifications@github.com');> wrote:

Shadow is NOT visible on iPhone 6

Shadow is visible on:

iPhone 5 Simulator
iPad Retina Simulator
iPad 2 Simulator
Shadow is NOT visible on

iPhone 5s Simulator
iPhone 6 Simulator
iPhone 6+ Simulator
iPad Air Simulator
—
Reply to this email directly or view it on GitHub.

—
Reply to this email directly or view it on GitHub
#449 (comment)
.

Regards,
Truong Ngoc Dai

brentvatne · 2015-03-30T19:44:28Z

👍 I noticed this today and would be happy to attempt to fix the bug if someone could point me in the right direction.

wangii · 2015-03-31T08:17:21Z

as far as I get, setShadowOpacity not working inside of RCTSetProperty on iPhone simulator running iPhone 5s, iPhone 6, and iPhone 6 plus, probably due to the fact that the type of shadowOpacity is float instead of CGFloat, according to CALayer doc

according to [doc] (https://developer.apple.com/library/ios/documentation/GraphicsImaging/Reference/CALayer_class/#//apple_ref/occ/instp/CALayer/shadowRadius), shadowOpacity is type `float`.

mbrgm · 2015-04-20T19:15:59Z

What's the current state of this?

jsierles · 2015-05-29T22:51:59Z

I see the shadow now on the iPhone 5s simulator: https://rnplay.org/plays/6_nkSA

Also see the shadow on the iPhone 6 device.

@oisinlavery Still seeing this issue?

brentvatne · 2015-05-30T00:52:14Z

I see the shadow on my iPhone 5s. Let's reopen this if anyone has the issue again.

mbrgm · 2015-06-15T20:09:33Z

I found that the shadow disappears once I set overflow: 'hidden' in the view's style. Is this intended behavior?

sahrens · 2015-06-15T20:52:43Z

The shadow typically displays outside the bounds of the view, so if you set
overflow hidden I would expect it to clip the shadow. If you really need
overflow hidden, you could put the shadow properties on a wrapper view that
doesn't hide the overflow?
On Mon, Jun 15, 2015 at 1:10 PM Marius Bergmann notifications@github.com
wrote:

I found that the shadow disappears once I set overflow: 'hidden' in the
view's style. Is this intended behavior?

—
Reply to this email directly or view it on GitHub
#449 (comment)
.

mbrgm · 2015-06-16T06:00:35Z

I expected it to clip the overflowing content of the view (like when you have rounded corners), but not the shadow. Apparently this is a very subjective expectation and having a container view for the shadow properties works just as well.

Am 15.06.2015 um 22:53 schrieb Spencer Ahrens notifications@github.com:

The shadow typically displays outside the bounds of the view, so if you set
overflow hidden I would expect it to clip the shadow. If you really need
overflow hidden, you could put the shadow properties on a wrapper view that
doesn't hide the overflow?
On Mon, Jun 15, 2015 at 1:10 PM Marius Bergmann notifications@github.com
wrote:

I found that the shadow disappears once I set overflow: 'hidden' in the
view's style. Is this intended behavior?

—
Reply to this email directly or view it on GitHub
#449 (comment)
.

—
Reply to this email directly or view it on GitHub.

vjeux · 2015-06-16T09:50:28Z

@mbrgm: our base reference to all of those questions is the web. Can you add a shadow and overflow hidden on a div in a jsfiddle and see what happens?

mbrgm · 2015-06-16T16:01:06Z

@vjeux As I expected, the shadow is visible.

https://jsfiddle.net/L55drqzg/1/

vjeux · 2015-06-16T16:51:25Z

cc @nicklockwood

sahrens · 2015-06-16T17:29:10Z

Yeah, we should try to follow web where possible, but this might be kinda tricky - what do you think, @nicklockwood?

nicklockwood · 2015-06-16T22:16:28Z

@sahrens I agree, we should try to emulate CSS, as we do for all other aspects of border rendering.

There's a fix I need to make to clipping that will fix this as a side effect anyway.

The best solution in the meantime is to nest two views, with the shadow on the outer view and clipping on the inner view (this is basically what my fix will be, but it'll be done opaquely by the framework instead of explicitly).

aleclarson · 2015-08-15T21:29:08Z

What's the status on this?

nicklockwood · 2015-08-15T22:00:24Z

I'm looking into addressing this, but it will take a while. FWIW, It's not a bug; this is how shadows are supposed to work on iOS, and there are fairly simple workarounds (nesting two views). But we would ideally like React to conform to the CSS spec here, so I'm working to make that happen.

nicklockwood · 2015-08-15T22:22:09Z

Sorry, I see I already said all that earlier ¯_(ツ)_/¯

eyaleizenberg · 2015-11-18T17:05:26Z

Any updates on this? Thanks...

nicklockwood · 2015-11-18T21:34:33Z

No progress, I'm afraid. I'd still advocate the nested views approach for now.

brentvatne · 2015-11-18T21:42:36Z

Hey folks, I'm moving this one over to ProductPains as per our new policy! Give it an upvote there if you believe this is an important fix: https://productpains.com/post/react-native/shadow-does-not-appear-if-overflow-hidden-is-set-on-ios/

In the meantime, feel free to use the approach that maestro @nicklockwood suggested above. I'm going to close the issue as there isn't much benefit to having it open here and on ProductPains.

Amurmurmur · 2017-08-18T17:39:24Z

Any updates on that? Still experiencing it on iOS 10.3.3, iPhone 7, RN 0.47.1 overflow: 'hidden' no shadows :/

deb0ch · 2018-06-01T22:07:58Z

Still happening today 😕

nanndoj · 2018-06-06T18:34:17Z

+1
Still happening today no shadows when using overflow: hidden

brentvatne closed this as completed May 30, 2015

vjeux reopened this Jun 16, 2015

brentvatne changed the title ~~Shadow appears on Simulator but not on Device~~ [Shadow] Shadow does not appear if overflow: hidden is set Jun 16, 2015

sahrens assigned nicklockwood Jun 16, 2015

brentvatne closed this as completed Nov 18, 2015

Amurmurmur unassigned nicklockwood Aug 18, 2017

jd20 mentioned this issue Dec 3, 2017

Can't apply shadow styling to SortRow on iOS deanmcpherson/react-native-sortable-listview#126

Closed

facebook locked as resolved and limited conversation to collaborators Jul 23, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 23, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Shadow] Shadow does not appear if overflow: hidden is set #449

[Shadow] Shadow does not appear if overflow: hidden is set #449

oisinlavery commented Mar 29, 2015

vjeux commented Mar 29, 2015

novadev94 commented Mar 29, 2015

oisinlavery commented Mar 29, 2015

sahrens commented Mar 29, 2015

novadev94 commented Mar 30, 2015

brentvatne commented Mar 30, 2015

wangii commented Mar 31, 2015

mbrgm commented Apr 20, 2015

jsierles commented May 29, 2015

brentvatne commented May 30, 2015

mbrgm commented Jun 15, 2015

sahrens commented Jun 15, 2015

mbrgm commented Jun 16, 2015

vjeux commented Jun 16, 2015

mbrgm commented Jun 16, 2015

vjeux commented Jun 16, 2015

sahrens commented Jun 16, 2015

nicklockwood commented Jun 16, 2015

aleclarson commented Aug 15, 2015

nicklockwood commented Aug 15, 2015

nicklockwood commented Aug 15, 2015

eyaleizenberg commented Nov 18, 2015

nicklockwood commented Nov 18, 2015

brentvatne commented Nov 18, 2015

Amurmurmur commented Aug 18, 2017 •

edited

Loading

deb0ch commented Jun 1, 2018 •

edited

Loading

nanndoj commented Jun 6, 2018

[Shadow] Shadow does not appear if overflow: hidden is set #449

[Shadow] Shadow does not appear if overflow: hidden is set #449

Comments

oisinlavery commented Mar 29, 2015

vjeux commented Mar 29, 2015

novadev94 commented Mar 29, 2015

oisinlavery commented Mar 29, 2015

sahrens commented Mar 29, 2015

novadev94 commented Mar 30, 2015

brentvatne commented Mar 30, 2015

wangii commented Mar 31, 2015

mbrgm commented Apr 20, 2015

jsierles commented May 29, 2015

brentvatne commented May 30, 2015

mbrgm commented Jun 15, 2015

sahrens commented Jun 15, 2015

mbrgm commented Jun 16, 2015

vjeux commented Jun 16, 2015

mbrgm commented Jun 16, 2015

vjeux commented Jun 16, 2015

sahrens commented Jun 16, 2015

nicklockwood commented Jun 16, 2015

aleclarson commented Aug 15, 2015

nicklockwood commented Aug 15, 2015

nicklockwood commented Aug 15, 2015

eyaleizenberg commented Nov 18, 2015

nicklockwood commented Nov 18, 2015

brentvatne commented Nov 18, 2015

Amurmurmur commented Aug 18, 2017 • edited Loading

deb0ch commented Jun 1, 2018 • edited Loading

nanndoj commented Jun 6, 2018

Amurmurmur commented Aug 18, 2017 •

edited

Loading

deb0ch commented Jun 1, 2018 •

edited

Loading