-
Notifications
You must be signed in to change notification settings - Fork 48.5k
marginBottom gets dropped sometimes #2231
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
Comments
Overlapping styles are not currently supported by React, see #2013. While it would be nice to support it, run-time performance is affected so it's a tricky subject (although offline transforms is definitely an idea). |
Ah, I see. Thanks, that makes sense. Closing. |
I actually think that it wouldn't be terrible to make this work. I'm betting that the reason it doesn't is that we expand shortcut properties and set each individual property (eg |
Hi, here is a simple use case: border-top-style: solid;
border-right-style: solid;
border-left-style: solid;
border-top-width: 1px;
border-right-width: 1px;
border-left-width: 1px;
border-top-color: black;
border-right-color: black;
border-left-color: black; |
@azazdeaz |
Would be really nice to have overlapping styles working.
And got |
In the product I'm currently developing, there's a case where the
marginBottom
value gets dropped by React sometimes. Unfortunately I couldn't manage to reproduce the issue in my attempts at a reduced test case, and I can't post the link to the unreleased product yet, but I thought I'd report it anyway in case someone has additional information to go by.Basically the case is that in the application, I have components whose style value I set to an object that is something like this:
These values are dependant on the screen size, which is listened to with
window.onresize
and then updated with something likesetProps({ screen: { width: screen.width, height: screen.height } });
.However, what I noticed is that when resizing the screen, more often than not, the components end up not having a vertical margin at all. I know that this is caused by React because I tried logging the value assigned to
style
inrender()
and its sound, and actually therender()
is not even called when you hit this behavior. Something that makes the problem go away is setting the style asinstead, which is what I'm doing for now. The application is running v0.10.0, but I just tried with v0.11.2 and it's still reproducible.
The text was updated successfully, but these errors were encountered: