<input type="checkbox" id="" disabled=""

<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/us

Update: Fixed in <a class="issue-link js-issue-link" data-error-text="Failed to load t

I think that bug can be solved with <a class="issue-link js-issue-link" data-error-tex

Bugs noticed in the playground about satori HOT 5 CLOSED

vercel commented on May 10, 2024 1

Bugs noticed in the playground

from satori.

Comments (5)

chibicode commented on May 10, 2024 1

On /test: Text node directly under a flex container is failing

<div
  style={{
    display: 'flex',
    height: '100%',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
  }}
>
  Hello World
</div>

It works if you put another div:

<div
  style={{
    display: 'flex',
    height: '100%',
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'column',
  }}
>
  <div>Hello World</div>
</div>

from satori.

shuding commented on May 10, 2024 1

@chibicode that should be fixed with #16 🎉

from satori.

chibicode commented on May 10, 2024

Update: Fixed in #7

In this example, seems like the height of the absolutely positioned square is affecting the position of the center square

CleanShot.2022-02-04.at.03.05.24.mp4

export default function Card({ withSatori }) {
  return withSatori(
    <div
      style={{
        display: 'flex',
        height: '100%',
        width: '100%',
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'column',
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          width: 100,
          height: 100,
          textAlign: 'center',
          backgroundColor: '#000',
        }}
      >
      </div>
      <div
        style={{
          left: 0,
          top: 0,
          position: 'absolute',
          display: 'flex',
          alignItems: 'center',
        }}
      >
        <span
          style={{
            width: 100,
            height: 100,
            background: 'black',
          }}
        />
      </div>
    </div>
  )
}

Also, this doesn't seem to work:

CleanShot.2022-02-04.at.03.19.02.mp4

export default function Card({ withSatori }) {
  return withSatori(
    <div
    style={{
      display: 'flex',
      height: '100%',
      width: '100%',
      alignItems: 'center',
      justifyContent: 'center',
      flexDirection: 'column',
    }}
  >
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        width: 100,
        height: 100,
        textAlign: 'center',
        backgroundColor: '#000',
      }}
    >
    </div>
    <div
      style={{
        left: 0,
        top: 0,
        position: 'absolute',
        width: 100,
        height: 100,
        background: 'red',
      }}
    >
    </div>
  </div>
  )
}

from satori.

shuding commented on May 10, 2024

I think that bug can be solved with #6 by adding another virtual container. However It's currently tricky because Yoga doesn't support inline/floating elements. So to support inline elements (e.g. Emoji), we currently make each "word" a node, and the parent container a flex box with wrapping enabled: