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

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

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

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

oisinlavery opened this issue Mar 29, 2015 · 27 comments

Comments

@oisinlavery
Copy link

@oisinlavery oisinlavery commented Mar 29, 2015

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
Copy link
Contributor

@vjeux 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
Copy link

@NovaDev94 NovaDev94 commented 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

@oisinlavery
Copy link
Author

@oisinlavery oisinlavery commented 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
@sahrens
Copy link
Contributor

@sahrens 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
Copy link

@NovaDev94 NovaDev94 commented 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

@brentvatne
Copy link
Collaborator

@brentvatne 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
Copy link

@wangii 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
Copy link

@mbrgm mbrgm commented Apr 20, 2015

What's the current state of this?

@jsierles
Copy link
Contributor

@jsierles 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
Copy link
Collaborator

@brentvatne 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
Copy link

@mbrgm 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
Copy link
Contributor

@sahrens 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
Copy link

@mbrgm 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
Copy link
Contributor

@vjeux 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
Copy link

@mbrgm 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
Copy link
Contributor

@vjeux vjeux commented Jun 16, 2015

@brentvatne 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
Copy link
Contributor

@sahrens 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
Copy link
Contributor

@nicklockwood 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
Copy link
Contributor

@aleclarson aleclarson commented Aug 15, 2015

What's the status on this?

@nicklockwood
Copy link
Contributor

@nicklockwood 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
Copy link
Contributor

@nicklockwood nicklockwood commented Aug 15, 2015

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

@eyaleizenberg
Copy link
Contributor

@eyaleizenberg eyaleizenberg commented Nov 18, 2015

Any updates on this? Thanks...

@nicklockwood
Copy link
Contributor

@nicklockwood nicklockwood commented Nov 18, 2015

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

@brentvatne
Copy link
Collaborator

@brentvatne 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
Copy link

@Amurmurmur 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
Copy link

@deb0ch deb0ch commented Jun 1, 2018

Still happening today 😕

@nanndoj
Copy link

@nanndoj 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.
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
You can’t perform that action at this time.