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

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

Closed
oisinlavery opened this Issue Mar 29, 2015 · 27 comments

Comments

Projects
None yet
@oisinlavery

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
    }
  }
});

0

@vjeux

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Mar 29, 2015

Contributor

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.

Contributor

vjeux commented Mar 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@NovaDev94

NovaDev94 Mar 29, 2015

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:
screen shot 2015-03-30 at 1 40 33 am
screen shot 2015-03-30 at 1 41 00 am
screen shot 2015-03-30 at 1 40 48 am
screen shot 2015-03-30 at 1 41 10 am

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:
screen shot 2015-03-30 at 1 40 33 am
screen shot 2015-03-30 at 1 41 00 am
screen shot 2015-03-30 at 1 40 48 am
screen shot 2015-03-30 at 1 41 10 am

@oisinlavery

This comment has been minimized.

Show comment
Hide comment
@oisinlavery

oisinlavery Mar 29, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Mar 29, 2015

Contributor

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.

Contributor

sahrens commented Mar 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@NovaDev94

NovaDev94 Mar 30, 2015

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

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Mar 30, 2015

Collaborator

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

Collaborator

brentvatne commented Mar 30, 2015

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

@wangii

This comment has been minimized.

Show comment
Hide comment
@wangii

wangii Mar 31, 2015

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

wangii commented Mar 31, 2015

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

@mbrgm

This comment has been minimized.

Show comment
Hide comment
@mbrgm

mbrgm Apr 20, 2015

What's the current state of this?

mbrgm commented Apr 20, 2015

What's the current state of this?

@jsierles

This comment has been minimized.

Show comment
Hide comment
@jsierles

jsierles May 29, 2015

Contributor

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?

Contributor

jsierles commented May 29, 2015

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

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 30, 2015

Collaborator

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

Collaborator

brentvatne commented May 30, 2015

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

@brentvatne brentvatne closed this May 30, 2015

@mbrgm

This comment has been minimized.

Show comment
Hide comment
@mbrgm

mbrgm Jun 15, 2015

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

mbrgm commented Jun 15, 2015

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

@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Jun 15, 2015

Contributor

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)
.

Contributor

sahrens commented Jun 15, 2015

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

This comment has been minimized.

Show comment
Hide comment
@mbrgm

mbrgm Jun 16, 2015

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.

mbrgm commented Jun 16, 2015

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

This comment has been minimized.

Show comment
Hide comment
@vjeux

vjeux Jun 16, 2015

Contributor

@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?

Contributor

vjeux commented Jun 16, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@mbrgm

mbrgm Jun 16, 2015

@vjeux As I expected, the shadow is visible.

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

mbrgm commented Jun 16, 2015

@vjeux As I expected, the shadow is visible.

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

@vjeux vjeux reopened this Jun 16, 2015

@vjeux

This comment has been minimized.

Show comment
Hide comment
Contributor

vjeux commented Jun 16, 2015

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

@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Jun 16, 2015

Contributor

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

Contributor

sahrens commented Jun 16, 2015

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

@nicklockwood

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Jun 16, 2015

Contributor

@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).

Contributor

nicklockwood commented Jun 16, 2015

@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

This comment has been minimized.

Show comment
Hide comment
@aleclarson

aleclarson Aug 15, 2015

Contributor

What's the status on this?

Contributor

aleclarson commented Aug 15, 2015

What's the status on this?

@nicklockwood

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Aug 15, 2015

Contributor

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.

Contributor

nicklockwood commented Aug 15, 2015

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

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Aug 15, 2015

Contributor

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

Contributor

nicklockwood commented Aug 15, 2015

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

@eyaleizenberg

This comment has been minimized.

Show comment
Hide comment
@eyaleizenberg

eyaleizenberg Nov 18, 2015

Contributor

Any updates on this? Thanks...

Contributor

eyaleizenberg commented Nov 18, 2015

Any updates on this? Thanks...

@nicklockwood

This comment has been minimized.

Show comment
Hide comment
@nicklockwood

nicklockwood Nov 18, 2015

Contributor

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

Contributor

nicklockwood commented Nov 18, 2015

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

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Nov 18, 2015

Collaborator

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.

Collaborator

brentvatne commented Nov 18, 2015

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.

@brentvatne brentvatne closed this Nov 18, 2015

@Amurmurmur

This comment has been minimized.

Show comment
Hide comment
@Amurmurmur

Amurmurmur Aug 18, 2017

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

Amurmurmur commented Aug 18, 2017

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

@deb0ch

This comment has been minimized.

Show comment
Hide comment
@deb0ch

deb0ch Jun 1, 2018

Still happening today 😕

deb0ch commented Jun 1, 2018

Still happening today 😕

@nanndoj

This comment has been minimized.

Show comment
Hide comment
@nanndoj

nanndoj Jun 6, 2018

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

nanndoj commented Jun 6, 2018

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

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

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.