Streaming Markdown in Safari sometimes results in broken list items

[stippi2]

Please see the above video, which illustrates the problem. I constantly set the array of messages in the conversation which triggers rerendering and the last message has incomplete markup. Depending on how exactly it was broken up, I end up with these list items that have a weird vertical offset in the text. Not sure if it only happens with these 1. **Heading:** Some text items. In Chrome, everything renders fine. The repo with my project can be found here: repo. The Component which renders the markdown is this one.

Any hints what I could do? Is it perhaps a bug in your plugin? Or maybe in Safari? Thanks!

[ChristianMurphy]

Welcome @stippi2!

Sorry you ran into a spot of trouble.
To clarify a few things:

1. there is no such thing a "streaming" markdown in react-markdown, every update is a clean re-render.
2. It is really hard to tell what you are experiencing, without actually seeing the markdown that is being generated
3. It is highly unlikely to be a bug in the Markdown implementation of react-markdown. It is extensively conformance tested against CommonMark.
4. react-markdown does not apply any styles, it cannot be a bug in styles provided by react-markdown as there are none

Some things to look into:

1. Check what the Markdown output, the Large Language Model may be adding a newline
2. Check the stylesheets, see if any of the several stylesheets you are applying could be adding margin, padding, or changing layout modes to produce extra space
3. Check what version of Safari you are using, and search the issue trackers for your style libraries to look for known issues

[stippi2]

Thank you very much for providing your input! I have tried to get a minimal reproducable test-case. In this branch of my project, I have simulated the updates to the markdown content. I have recorded the progression of the content, and assembled a sequence that can be used to reproduce the issue. I've narrowed it down to just two consecutive states:

  [
    {
      "role": "user",
      "content": "Can you give me a list of 5 good science fiction movies?"
    },
    {
      "role": "assistant",
      "content": "Certainly! Here are five highly-regarded science fiction movies that you might enjoy:\n\n1. \"Blade Runner\" (1982) – Directed by Ridley Scott and starring Harrison Ford, this film is a visually stunning exploration of artificial intelligence and identity.\n\n2"
    }
  ]

->

  [
    {
      "role": "user",
      "content": "Can you give me a list of 5 good science fiction movies?"
    },
    {
      "role": "assistant",
      "content": "Certainly! Here are five highly-regarded science fiction movies that you might enjoy:\n\n1. \"Blade Runner\" (1982) – Directed by Ridley Scott and starring Harrison Ford, this film is a visually stunning exploration of artificial intelligence and identity.\n\n2. \"The Matrix\" (1999) – Directed by the Wachowski siblings, this movie revolutionized special effects with its groundbreaking \"bullet time\" sequences and presents a compelling cyberpunk story.\n\n3. \"Inception\" (2010) – Directed by Christopher Nolan, this mind-bending thriller delves into the world of dreams and features a complex narrative structure.\n\n"
    }
  ]

So in the first pass, the markdown ends on the next number of the list block. This is what triggers the Safari rendering issue. If rendering directly the final resulting state, there is no problem. But switching from the first to the second state triggers it.

If you want to try for yourself, I hope it is easy to do so with my project. For the API keys, you could just add dummy values (see the README.md for what I mean.) The updates are triggered via this effect.

[ChristianMurphy]

This is not a minimally reproducible example, there are still a ton of unrelated libraries in the mix.
Focus on narrowing the dependencies down to just react and react-markdown and in an environment that does not require cloning code down locally.

We provide starter sandboxes to aid the process:

• https://codesandbox.io/p/sandbox/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite
• https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite

It would also be critical to know which browsers and versions you are testing with.
Safari has multiple major versions and has different behavior on different platforms (MacOS, iOS, iPadOS, etc)

[stippi2]

Thanks for the pointers and sorry for the late reply. This is my fork of the starter sandbox on Codesandbox. Open in Safari 17.2.1 (19617.1.17.11.12) on macOS to see the problem.

[ChristianMurphy]

Thanks @stippi2!
There is no issue, with react-markdown the HTML output is correct in Safari.

The issue is with styles. Safari has different default styles, and potentially a bug in how Safari handles block layout inside lists.
Consider adding a stylesheet with

li {
  margin: 0;
  padding: 0;
}
li p {
  display: inline-block;
  margin: 0;
  padding: 0;
}

to reduce layout differences between browsers.

[stippi2]

Thanks for the explanation. It sure looks like a bug in Safari, then. With your suggested stylesheet, it seems the layout is stable now, but it often looks very strange, with the number bottom-aligned.

[aimengyu]

The root cause of the bug was due to returning two newline characters(\n\n) before list(\n\n1.).
Try this

li p {
  display: inline;
}

[itsJosephV]

The root cause of the bug was due to returning two newline characters(\n\n) before list(\n\n1.). Try this

li p {
  display: inline;
}

that's what I needed, works perfect now, thank you! :)

[spyhunter1280]

Hi, @stippi2
I hope you are doing well.
I faced the same issue with you and tried with above correct answer but couldn't fix the error
Please look at my screenshot and help me