vite-react doesn't work in iOS safari

[jeetiss]

Bug report

Packages affected

• sandpack-client
• sandpack-react

Description of the problem

The default vite-react sandpack setup doesn't work in iOS safari

import { Sandpack } from "@codesandbox/sandpack-react";

export default function App() {
  return (
    <Sandpack
      theme="light"
      template="vite-react"
      options={{
        showConsoleButton: true,
        showInlineErrors: true,
        showNavigator: true,
        showLineNumbers: true,
        showTabs: true,
      }}
    />
  );
};

What steps can we take to reproduce the problem?

• run vite-react in iOS safari
• safari will die

RPReplay_Final1678300533.MP4

Your Environment

Software	Name/Version
Sandpack-react version	2.1.2
Browser	iOS safari
Operating System	iOS 16.0

[danilowoz]

Hey, thanks for reporting this issue.

This is a known issue on Nodebox, and we're currently beta support iOS Safari, as mentioned here. For some reason, there's a memory leak on iOS Safari that we couldn't figure out how to solve yet, but we will keep you posted when we get it done.

@DeMoorJasper, correct me if I'm wrong.

[DeMoorJasper]

This is a memory issue with safari in general, really hard to debug as the memory issue is actually in safari itself not our code. (Using 3-5x more memory than chrome) Once we figure out where in safari this happens we might be able to work around it.

This is highly dependent on the device as safari kills itself once it reaches more than half the system memory, so on an iphone 14 pro it works fine (most of the time) but not on iphone 13. We've already done quite a few improvements here, but the main issue is still to be found.