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

Certain styles applied together peg CPU #824

Closed
lwansbrough opened this issue Apr 12, 2015 · 7 comments
Closed

Certain styles applied together peg CPU #824

lwansbrough opened this issue Apr 12, 2015 · 7 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@lwansbrough
Copy link
Contributor

While working on my markdown module, I ran into a situation where my simulator CPU would jump to 160%+ and would (obviously) freeze the app. I found this behaviour particularly strange because the only thing I was doing was inserting React elements into the virtual DOM.

I thought perhaps there was a parsing bug that was causing a huge tree to be rendered, but upon further investigation I found I could repeat the issue with plain text inside my Markdown tag. The issue was only coming up after a certain number of letters were entered. That initial assumption was wrong though.

What seems to be happening is when a Text element exceeds the available width of its containing View, a bug causes the app to freeze up. This is more difficult to explain than it is to show, here's the code: (For reference, I was using 0.3.11 the iPhone 6 simulator, so the 375 width is relevant.)

<View style={{padding: 15, width: 375}}>
  <View style={{
    marginTop: 10,
    marginBottom: 10,
    flexWrap: 'wrap',
    flexDirection: 'row',
    alignItems: 'flex-start',
    justifyContent: 'flex-start'
  }}>
    <Text>
      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
    </Text>
  </View>
</View>
@brentvatne
Copy link
Collaborator

@lwansbrough @vjeux and I looked into this in irc, fix for anyone else that comes across it is to use flex: 1 on the text node. This issue occurs when you have flexWrap: wrap and flexDirection: row on a parent of a text node.

@vjeux
Copy link
Contributor

vjeux commented Apr 12, 2015

The infinite loop is caused inside of the layout algorithm: https://github.com/facebook/css-layout if anyone is interesting in debugging it

@brentvatne
Copy link
Collaborator

Also, screenshot of the thread that is getting caught in an infinite loop while doing layout:

bug

lwansbrough added a commit to lwansbrough/react-native-markdown that referenced this issue Apr 12, 2015
@lwansbrough
Copy link
Contributor Author

It appears flex: 1 offers a very different behaviour than what's offered by flexDirection: 'row' + flexWrap: 'wrap'. This bug has already been resolved upstream in https://github.com/facebook/css-layout/blob/master/src/Layout.js -- the React Native team just has to pull down those changes.

lwansbrough added a commit to lwansbrough/react-native-markdown that referenced this issue Apr 12, 2015
…RN team to pull upstream changes which fix the infinite loop
@jmstout
Copy link
Contributor

jmstout commented May 7, 2015

Any news on this?

@brentvatne
Copy link
Collaborator

@jmstout - this works now on master, no longer causes CPU to be pegged thanks to syncing css-layout in this commit: af92154

@osdio
Copy link

osdio commented May 22, 2015

but it also a bug, when I run , the app cpu hit 100%

@facebook facebook locked as resolved and limited conversation to collaborators May 29, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 22, 2018
facebook-github-bot pushed a commit that referenced this issue Oct 12, 2018
Summary:
`YGRoundValueToPixelGrid` currently rounds negative numbers incorrectly. For example:

```
YGRoundValueToPixelGrid(-2.2, 1.0, /* ceil */ false, /* floor */ true) = -2.0
```

However, that operation is supposed to take the floor of the number so the result should acutally be `-3.0`.

There's a detailed comment in `YGRoundValueToPixelGrid` about the fix and why it works.

A symptom that manifested because of this bug is that text nodes could get smaller and smaller on each layout pass. For details see facebook/yoga#824.

Fixes #824

Adam Comella
Microsoft Corp.
Pull Request resolved: facebook/yoga#825

Reviewed By: priteshrnandgaonkar

Differential Revision: D10282064

Pulled By: shergin

fbshipit-source-id: 16ca966e6cb0cfc88b1dbf4ba31e7b1dbe1f2049
t-nanava referenced this issue in microsoft/react-native-macos Jun 17, 2019
Summary:
`YGRoundValueToPixelGrid` currently rounds negative numbers incorrectly. For example:

```
YGRoundValueToPixelGrid(-2.2, 1.0, /* ceil */ false, /* floor */ true) = -2.0
```

However, that operation is supposed to take the floor of the number so the result should acutally be `-3.0`.

There's a detailed comment in `YGRoundValueToPixelGrid` about the fix and why it works.

A symptom that manifested because of this bug is that text nodes could get smaller and smaller on each layout pass. For details see facebook/yoga#824.

Fixes #824

Adam Comella
Microsoft Corp.
Pull Request resolved: facebook/yoga#825

Reviewed By: priteshrnandgaonkar

Differential Revision: D10282064

Pulled By: shergin

fbshipit-source-id: 16ca966e6cb0cfc88b1dbf4ba31e7b1dbe1f2049
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests

6 participants