Only first page is shows on iPhone

[maybebansky]

Describe the bug

I have 2 Page components within my Document component. On Safari and Chrome on my MacBook this works fine, both pages are visible. This is still the case when I make my browser very narrow.

However on Mobile Safari and Chrome on an iPhone only the first page is shown.

To Reproduce

Run the code below or visit this sandbox: https://n9njwq-5173.csb.app/

import {
  Page,
  Text,
  View,
  Document,
  StyleSheet,
  PDFViewer,
} from "@react-pdf/renderer";

// Create styles
const styles = StyleSheet.create({
  page: {
    flexDirection: "row",
  },
  section: {
    margin: 10,
    padding: 10,
    flexGrow: 1,
  },
});

// Create Document Component
const MyDocument = () => (
  <Document>
    <Page size="A4" style={{ ...styles.page, backgroundColor: "teal" }}>
      <View style={styles.section}>
        <Text>Page 1</Text>
      </View>
    </Page>
    <Page size="A4" style={{ ...styles.page, backgroundColor: "orange" }}>
      <View style={styles.section}>
        <Text>Page 2</Text>
      </View>
    </Page>
  </Document>
);

function App() {
  return (
    <div>
      <PDFViewer>
        <MyDocument />
      </PDFViewer>
    </div>
  );
}

export default App;

Expected behavior Both pages should be shown (with scrolling)

Screenshots

On desktop you can scroll between pages:

On mobile when you scoll to the bottom of the first page you can go no further.

Desktop (please complete the following information):

• OS: iOS
• Browser Mobile Chrome and Mobile Safari
• React-pdf version 3.1.14

[diegomura]

Don't know the cause but seems like your window is not big enough. You can pass styles to the viewer component. Either way, PDF generation (task of this project) is being done correctly it seems

[maybebansky]

Ive tried increasing the viewer to the size of the window and I still have the same issue:

    <div style={{ height: "100vh", width: "100vw", backgroundColor: "red" }}>
      <PDFViewer style={{ width: "100%", height: "100%" }}>
        <MyDocument />
      </PDFViewer>
    </div>

You can see / edit the code here: https://codesandbox.io/p/devbox/objective-mendeleev-n9njwq?file=%2Fsrc%2FApp.tsx

Here is a screen recording show issue on iPhone but not on desktop browser of the same size: https://github.com/diegomura/react-pdf/assets/6142418/928d07a8-e927-4a8c-8415-87cca0bff944

[maybebansky]

@diegomura would you mind reopening this? Thanks