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.

Sign up for GitHub

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

Jump to bottom

Infinite loop when splitting pages #2884

Open
cosdon opened this issue Sep 25, 2024 · 4 comments · May be fixed by #2895
Open

Infinite loop when splitting pages #2884

cosdon opened this issue Sep 25, 2024 · 4 comments · May be fixed by #2895

Comments

@cosdon
Copy link

cosdon commented Sep 25, 2024

Describe the bug
Some layouts loop when calling splitPage; all the nodes are transferred to the next page.

To Reproduce

Apologies for the layout, it's reverse engineered from a customer's PDF that showed the problem.
This snippet will hang the renderer


const style_1 = { padding: "30px 30px 70px 30px" };

const style_2 = { marginBottom: 24 };

const style_3 = {
  fontFamily: "Noto Sans",
  color: "#A1A1A1",
  textTransform: "uppercase",
  fontSize: 9,
  fontWeight: 700,
};

const style_4 = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
  flexWrap: "nowrap",
};

const style_5 = {
  fontFamily: "Noto Sans",
  color: "#333333",
  fontSize: 18,
  fontWeight: 600,
};

const style_6 = { flex: 1 };

const style_7 = {
  display: "flex",
  flexDirection: "row",
  paddingTop: 10,
};

const style_8 = {
  display: "flex",
  flexDirection: "row",
  alignItems: "stretch",
};

const style_9 = { marginRight: 8, marginBottom: 3 };

const style_10 = { width: 4, marginRight: 2 };

const style_11 = { backgroundColor: "#F2A24A" };

const style_12 = {
  display: "flex",
  flexDirection: "row",
  alignItems: "center",
};

const style_13 = {};

const style_14 = {
  fontFamily: "Noto Sans",
  color: "#333333",
  fontSize: 9,
  fontWeight: 400,
};

const style_15 = { fontWeight: 700, marginLeft: 6 };

const style_16 = { color: "#5C5C5C", fontWeight: 500 };

const style_17 = { backgroundColor: "#151515" };

const style_18 = {
  fontFamily: "Noto Sans",
  color: "#333333",
  fontSize: 12,
  fontWeight: 400,
};

const style_19 = { fontWeight: 700 };

const style_20 = {
  width: "100%",
  height: 2,
  backgroundColor: "#E8E8E8",
  marginTop: 4,
  marginBottom: 8,
};

const style_21 = { marginBottom: 12 };

const style_22 = { fontSize: 18 };

const style_23 = { fontSize: 18, marginVertical: 18 };

const style_24 = {
  fontFamily: "Noto Sans",
  color: "#333333",
  fontSize: 9,
  fontWeight: 400,
  margin: "4px 0",
};

const style_25 = { width: "100%" };

const style_26 = { display: "flex", flexDirection: "row" };

const style_27 = {
  flexBasis: "50%",
  borderBottom: "1px solid #E8E8E8",
  marginRight: 16,
};

const style_28 = { padding: 8 };

const style_29 = { flexBasis: "20%" };

const style_30 = { flexBasis: "80%" };

const style_31 = {
  fontFamily: "Noto Sans",
  color: "#0099ff",
  fontWeight: 600,
};

const style_32 = {
  flexBasis: "50%",
  borderBottom: "1px solid #E8E8E8",
  marginRight: 0,
};

const style_33 = {
  flexBasis: "50%",
  borderBottom: "none",
  marginRight: 16,
};

const style_34 = {
  flexBasis: "50%",
  borderBottom: "none",
  marginRight: 0,
};

const style_35 = { textDecoration: "underline" };

const style_36 = { marginBottom: 6 };

const style_37 = { marginVertical: 18 };

const style_38 = {
  fontFamily: "Noto Sans",
  color: "#333333",
  fontSize: 9,
  borderRadius: 8,
  margin: "6px 0",
  padding: 8,
  backgroundColor: "#F5FBFD",
};

const style_39 = { margin: 0 };

const style_40 = { margin: "6px 0" };

const style_41 = {
  width: 30,
  textAlign: "right",
  flexShrink: 0,
  flexGrow: 0,
  paddingRight: 5,
};

const style_42 = {};

const style_43 = { textAlign: "left", flexGrow: 1, flexBasis: 1 };

const style_44 = {
  fontFamily: "Noto Sans",
  color: "#333333",
  fontSize: 9,
  fontWeight: 400,
  flex: 1,
};

const style_45 = {
  borderBottom: "1pt solid black",
  borderRight: "1pt solid black",
  borderLeft: "1pt solid black",
  borderTop: "1pt solid black",
  width: "100%",
  display: "flex",
  flexDirection: "row",
  justifyContent: "space-between",
  backgroundColor: "",
};

const style_46 = {
  flex: 0.1391304347826087,
  textAlign: "left",
  fontSize: 14,
  borderRight: "1pt solid black",
};

const style_47 = { padding: "3px 5px" };

const style_48 = { fontWeight: "bold" };

const style_49 = {
  flex: 0.06956521739130435,
  textAlign: "left",
  fontSize: 14,
  borderRight: "1pt solid black",
};

const style_50 = {
  flex: 0.043478260869565216,
  textAlign: "left",
  fontSize: 14,
  borderRight: "1pt solid black",
};

const style_51 = {
  flex: 0.3391304347826087,
  textAlign: "left",
  fontSize: 14,
  borderRight: "1pt solid black",
};

const style_52 = {
  flex: 0.22608695652173913,
  textAlign: "left",
  fontSize: 14,
  borderRight: "1pt solid black",
};

const style_53 = {
  flex: 0.1826086956521739,
  textAlign: "left",
  fontSize: 14,
};

const style_54 = {
  borderBottom: "1pt solid black",
  borderRight: "1pt solid black",
  borderLeft: "1pt solid black",
  width: "100%",
  display: "flex",
  flexDirection: "row",
  justifyContent: "space-between",
  backgroundColor: "",
};

const style_55 = {
  flex: 0.1391304347826087,
  textAlign: "left",
  fontSize: 12,
  borderRight: "1pt solid black",
};

const style_56 = {
  fontFamily: "Noto Sans",
  color: "#333333",
  fontSize: 9,
  fontWeight: 400,
};

const style_57 = {
  flex: 0.06956521739130435,
  textAlign: "left",
  fontSize: 12,
  borderRight: "1pt solid black",
};

const style_58 = {
  flex: 0.043478260869565216,
  textAlign: "left",
  fontSize: 12,
  borderRight: "1pt solid black",
};

const style_59 = {
  flex: 0.3391304347826087,
  textAlign: "left",
  fontSize: 12,
  borderRight: "1pt solid black",
};

const style_60 = {
  flex: 0.22608695652173913,
  textAlign: "left",
  fontSize: 12,
  borderRight: "1pt solid black",
};

const style_61 = {
  flex: 0.1826086956521739,
  textAlign: "left",
  fontSize: 12,
};


const Example = () => {
  return (
    <Document>
      <Page style={style_1} size="LETTER" wrap>
        <View style={style_2}>
          <Text style={style_3}>{"Loremip"}</Text>
          <View>
            <View style={style_4}>
              <Text style={[style_5, style_6]}>
                {"Sumdol Orsi Tametco nse Cteturadip isci nge Litsusp"}
              </Text>
            </View>
            <View style={style_7}>
              <View style={[style_8, style_9]} wrap>
                <View style={[style_10, style_11]}></View>
                <View style={[style_12, style_13]}>
                  <View style={[style_14, style_15]}>
                    <Text>{"Endisset"}</Text>
                    <Text>
                      <Text style={style_16}>{"Ristiq"}</Text> {"6.7"}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={[style_8, style_9]} wrap>
                <View style={[style_10, style_17]}></View>
                <View style={[style_12, style_13]}>
                  <View style={[style_14, style_15]}>
                    <Text>{"Aliquetv"}</Text>
                    <Text>
                      <Text style={style_16}>{"Estibul"}</Text>
                    </Text>
                  </View>
                </View>
              </View>
              <View style={[style_8, style_9]} wrap>
                <View style={[style_10, style_17]}></View>
                <View style={[style_12, style_13]}>
                  <View style={[style_14, style_15]}>
                    <Text>{"Umproin Lobortisne"}</Text>
                    <Text>
                      <Text style={style_16}>{"Cliberoidl, Obortis"}</Text>
                    </Text>
                  </View>
                </View>
              </View>
              <View style={[style_8, style_9]} wrap>
                <View style={[style_10, style_17]}></View>
                <View style={[style_12, style_13]}>
                  <View style={[style_14, style_15]}>
                    <Text>{"Doneci"}</Text>
                    <Text>
                      <Text style={style_16}>{"Mperdietd"}</Text>
                    </Text>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
        <View style={style_2}>
          <View>
            <View style={style_12}>
              <Text style={[style_18, style_19]}>{"Apibusq Uameusa"}</Text>
            </View>
            <View style={style_20}></View>
          </View>
          <View>
            <View style={style_21}>
              <Text style={[style_14, style_19, style_13]}>
                {"Gittismassa"}
              </Text>
              <View style={[style_22]}>
                <View style={[style_23, style_24]}>
                  <Text>
                    {
                      "Pellen tesquenonpr aes ent maximuses tsed RHON cusmaximusaliq."
                    }
                  </Text>
                </View>
              </View>
            </View>
            <View style={style_21}>
              <Text style={[style_14, style_19, style_13]}>
                {"Uamnu Ll Alectusbi"}
              </Text>
              <View style={[style_22]}>
                <View style={[style_23, style_24]}>
                  <Text>
                    {
                      "Ben d umsita metconsequat nec tincidun tinn, eque nu Llamultri, ce sest venenat isvenen at ispulvin arurnaurnae lementu mleoidd ictu mes teratse dturpisph asellusquis."
                    }
                  </Text>
                </View>
                <View style={[style_23, style_24]}>
                  <Text>
                    {
                      "LacUseget'a ugue ege stas euismod pellente squevehic ULAA rcuauct orbiben du mer atlaore et d ictumips umdone csi tametlo. Bor tismagnav ESTI bulumat bi bendumme tus lor emipsumd ol orsitametc onsectetura dipis cingeli ts u spen di ssetristiqu ealiqu et vestibu lump roinlobo RTIS necliberoidlob."
                    }
                  </Text>
                </View>
              </View>
            </View>
            <View style={style_21}>
              <Text style={[style_14, style_19, style_13]}>
                {"Ortisdon Ecimpe"}
              </Text>
              <View style={[style_22]}>
                <View style={[style_23, style_24]}>
                  <Text>
                    {
                      "Rdi etd ap ibu squameusag ittismass apellentesq uenon prae sent max imusests. E drhoncusm aximu saliq uamnulla lec tus/bi bendum sit ametconse quat nectin ci dun tinn equ enullamul trices, estvenenati svenenati spul vinar ur naur. Naelement um leo iddi ct umes terat sedturpisph asellusqui, slac usegetaugueeg estas euis mo dpellent es quevehicu laarcuau ctor bib/en."
                    }
                  </Text>
                </View>
              </View>
            </View>
          </View>
        </View>
        <View style={style_2} wrap>
          <View>
            <View style={style_12}>
              <Text style={[style_18, style_19]}>{"Ipsumdonec"}</Text>
            </View>
            <View style={style_20}></View>
          </View>
          <View style={style_25}>
            <View style={style_26}>
              <View style={[style_26, style_27]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"SIT"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>{"456"}</Text>
                  </Link>
                </View>
              </View>
              <View style={[style_26, style_32]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"tlOb"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Text style={style_14}>{"OR345"}</Text>
                </View>
              </View>
            </View>
            <View style={style_26}>
              <View style={[style_26, style_27]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"MAGNA VES"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>{"TI-67 LUMATBIBENDUM METUSLOREM"}</Text>
                  </Link>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>{"IP-89 MDOLORSI TAMETCONSE CTETURA"}</Text>
                  </Link>
                </View>
              </View>
              <View style={[style_26, style_32]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"DIPIS CIN"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>
                      {"GE-5 ITSUSPENDISS ETRISTIQUEALIQU ETV ESTIBULUM"}
                    </Text>
                  </Link>
                </View>
              </View>
            </View>
            <View style={style_26}>
              <View style={[style_26, style_27]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"Proi NLOBO"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>{"RTIS-NECLIBE-5 (OIDLO BORTI s7.8.9)"}</Text>
                  </Link>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>{"ECIMP-ERDIETD-2 (PIBUS QUAME u4.5.6)"}</Text>
                  </Link>
                </View>
              </View>
              <View style={[style_26, style_32]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"ITTIS"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>{"Mas sapelle N3.ES.Qu.Eno.1"}</Text>
                  </Link>
                </View>
              </View>
            </View>
            <View style={style_26}>
              <View style={[style_26, style_27]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"PRA"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>{"Ese ntmaxim usestsedrho 6.7"}</Text>
                  </Link>
                </View>
              </View>
              <View style={[style_26, style_32]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"USMAX"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>
                      {
                        "Imu saliqua §345.678(l)(0): Ctusbibe: Ndumsitametc onsequat."
                      }
                    </Text>
                  </Link>
                </View>
              </View>
            </View>
            <View style={style_26}>
              <View style={[style_26, style_33]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"NECT"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>
                      {
                        "Incid untinnequ ENUL: lamultricese, stven, en atisvenena ti SPU"
                      }
                    </Text>
                  </Link>
                </View>
              </View>
              <View style={[style_26, style_34]}>
                <View style={[style_28, style_29]}>
                  <Text style={style_3}>
                    {"LVI Nar 12"}
                    {":"}
                  </Text>
                </View>
                <View style={[style_28, style_30]}>
                  <Link style={[style_14, style_31]} src="https://example.com">
                    <Text>
                      {"3456 NAE Lem 34 Tuml Eoiddictu Mesterat Sedtur"}
                    </Text>
                  </Link>
                </View>
              </View>
            </View>
          </View>
        </View>
        <View style={style_2}>
          <View>
            <View style={style_12}>
              <Text style={[style_18, style_19]}>
                {"Pisphasellu Squislacu"}
              </Text>
            </View>
            <View style={style_20}></View>
          </View>
          <View>
            <View style={style_21}>
              <Text style={[style_14, style_19, style_13]}>
                {"Segetauguee Ges"}
              </Text>
              <View style={[style_22]}>
                <View style={[style_23, style_24]}>
                  <Text>
                    {
                      "Taseuis mod pel le NTE/SQU eve hic ulaarcuau ctorbibe nd umera tlaoreetd ictumipsumd, onecsit ametlo, bo rtism agnavesti bulu ma tbibe nd um metusloremip su m dolorsi TAM et con sectetu."
                    }
                  </Text>
                </View>
                <View style={[style_23, style_24]}>
                  <Text>
                    {
                      "Rad ipiscingelit susp endi ssetris tiquealique Tvestibulum Proinlobort isn ecliberoid loborti sdonecim perdiet dapibus quame usagi, ttismassap ellentes quenonpr aes en tmaximuse st sedrhon cusmaxi musaliquamn. Ull alec tusbiben du ms ita metconsequa tnectin ci duntinne que nullamultri ce SES/TVE nenatisven. Enatispulvi narurna urnaele ment uml eoiddi ctumes ter atsedt'u rpisphasell usquisl a cuseg etau gu eege staseuismod. Pellente squ evehic'u laarcuaucto rbiben dum eratlaoreet dic tumipsum don ECS/ITA metlobor tisma gnavesti bulu mat bibend'u mmetuslorem ipsumdo lorsita met consec't eturadipisc in g elitsu."
                    }
                  </Text>
                </View>
                <View style={[style_23, style_24]}>
                  <Text>
                    {
                      "Ump roin lobo, rtisneclibe roidlob ort is donecimper di etdapib. Us qua meu sagitt ismas sa pelle nt esque non praese ntmax im usestse dr honcusma, ximu sa liquamnulla lectus bi bendu m sitametcons. Equatne, ct inc idu nt innequen ul lamultr ic e sestv enenat is ven en atispul, vin ar urn aurnaelemen tu mleoiddic tu mesterats edtu rpi sphase ll usquis lacuseg etauguee ge sta seuism odp ellente s que ve hic ulaarc uauctorbibend. Umerat laor eetd ictumipsumd onecsit ame tlo bo rtismagn ave stibulumatbib end umm etu sloremi psu mdolor sita metconsecte tura di PIS cingelitsu sp end iss etri st iqueali que tvestibulum proinlobo rt i snecli beroid lo bortisdonec imperdietda pibusquame usagittismas."
                    }
                  </Text>
                </View>
                <View style={[style_23, style_24]}>
                  <Text>
                    {"Sapel lentesqu enonpraese nt maximus estsed rhoncusmaxi "}
                    <Link
                      style={[style_35, style_31]}
                      src="https://example.com"
                    >
                      <Text>
                        <Text>{"mu saliq uamnullal ectu"}</Text>
                      </Text>
                    </Link>
                    {
                      " sbibe ndu ms itametconse quatnec tincidunt inne qu ENUllamultri "
                    }
                    <Link
                      style={[style_35, style_31]}
                      src="https://example.com"
                    >
                      <Text>
                        <Text>
                          {"ceses://tvenen.ati/SVEnenatispu/LVInarurnaur"}
                        </Text>
                      </Text>
                    </Link>
                    {"."}
                  </Text>
                </View>
                <View style={[style_23, style_24]}>
                  <Text>
                    {
                      "Naelementum leoiddictume st er atsedturpis ph asellusquis lacuseg etau gue eges ta seui sm odpellente squeveh iculaarc uauctorbibe ndumera tla oree tdictumipsu mdon. Ecsitametlo bortismagnav es tibu lu matbi bend u mmetuslorem ips umdo lorsit ametconsecte tu r adipiscinge litsuspen. Diss etrist iquealiq uetvestib ulump r oinlobortis nec libero id l obortisdo necim pe r dietda pib usquameu sagi tti sma. Ssap ell en tesquen onpraes ent max im use STSedRhoncusmaXimusali quamnulla, LECtusbibeNdumsitametConsequatnec: "
                    }
                    <Link
                      style={[style_35, style_31]}
                      src="https://example.com"
                    >
                      <Text>
                        <Text>
                          {
                            "tinci://duntinneq.uenul.lam/ultricesestve/nenatisvenenati/spulvinarur_naurnael_emen/tumleoiddictumesterats/edturpisphasellusq"
                          }
                        </Text>
                      </Text>
                    </Link>
                    {"."}
                  </Text>
                </View>
              </View>
            </View>
            <View>
              <Text style={[style_14, style_19, style_13]}>
                {"Uisl Acusege"}
              </Text>
              <View style={style_36}>
                <Text style={style_14}>{"Tau Guee Gestase (.uismo)"}</Text>
                <View style={[style_22]}>
                  <View style={[style_37, style_38]}>
                    <Text>
                      {
                        "<dpe>LLEntEsquevehiCulaarcu</auc><torb>\n<ibe>NDUmeratLaoreetdiCtumi</psu><mdon/>\n<ecs>ITAmetloBortismagNavesTiBulUmatbib</end><umme/>\n...\n<tus>LORemipsumdOlorsit</ame><tcon>"
                      }
                      {"\n"} {"<sec> ... </tet><urad>"}
                      {"\n"}{" "}
                      {"<ipi>SCIngelitsuSpendiSsetristIQUEAliqu</etv><esti/>"}
                      {"\n"}{" "}
                      {"<bul>UMProinlobOrtisneclibEroidloborti</sdo><necim/>\n"}
                    </Text>
                  </View>
                </View>
              </View>
              <View style={style_36}>
                <Text style={style_14}>{"Perd Ietd Apibusq (.uameu)"}</Text>
                <View style={[style_22]}>
                  <View style={[style_37, style_38]}>
                    <Text>
                      {
                        "<sag>ITTisMassapellEntesque</non><prae>\n<sen>TMAximusEstsedrhoNcusm</axi><musal/>\n<iqu>AMNullalEctusbibeNdumsItAmeTconseq</uat><necti/>\n...\n<nci>DUNtinnequeNullamu</ltr><ices>"
                      }
                      {"\n"} {"<est> ... </ven><enat>"}
                      {"\n"}{" "}
                      {"<isv>ENEnatispulVinaruRnaurnaeLEMENtuml</eoi><ddict/>"}
                      {"\n"}{" "}
                      {"<ume>STEratsedtUrpisphaselLusquislacus</ege><taug/>\n"}
                    </Text>
                  </View>
                </View>
              </View>
            </View>
            <View style={style_21}>
              <Text style={[style_14, style_19, style_13]}>
                {"Ueegestase Uismodpe"}
              </Text>
              <View style={[style_22]}>
                <View style={[style_37, style_39]}>
                  <View style={[style_26, style_40]}>
                    <View style={[style_41, style_42]}>
                      <Text>{"•"}</Text>
                    </View>
                    <View style={[style_43, style_44]}>
                      <View style={[style_23, style_24]}>
                        <Text>
                          {
                            "Llen Tesqu Evehicula arcuauc torbibend ume ra tlaoree tdictumi psumdon ecsitametlo borti SMA "
                          }
                          <Link
                            style={[style_35, style_31]}
                            src="https://example.com"
                          >
                            <Text>
                              <Text>
                                {
                                  "gnave://stibuluma.tbibe.ndu/mmetusloremip/sumdolor/sitametcon_sectetur_adipisc_ingelitsusp"
                                }
                              </Text>
                            </Text>
                          </Link>
                        </Text>
                      </View>
                    </View>
                  </View>
                  <View style={[style_26, style_40]}>
                    <View style={[style_41, style_42]}>
                      <Text>{"•"}</Text>
                    </View>
                    <View style={[style_43, style_44]}>
                      <View style={[style_23, style_24]}>
                        <Text>
                          {
                            "Endi Ssetr Istiqueal iquetve stibulum proinlobort is nec li ber OIDloBortisdonEcimperd ie tdapibu SQU "
                          }
                          <Link
                            style={[style_35, style_31]}
                            src="https://example.com"
                          >
                            <Text>
                              <Text>
                                {
                                  "ameus://agittisma.ssape.lle/ntesquenonpra/esentmaximusest/sedrhoncusm_aximusal_iqua/mnullalectusbibendumsi"
                                }
                              </Text>
                            </Text>
                          </Link>
                        </Text>
                      </View>
                    </View>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
        <View style={style_2}>
          <View>
            <View style={style_12}>
              <Text style={[style_18, style_19]}>{"Tametco Nsequatn"}</Text>
            </View>
            <View style={style_20}></View>
          </View>
          <View>
            <View>
              <View style={style_25}>
                <View style={style_45}>
                  <View style={[style_46, style_13, style_47]} wrap>
                    <Text style={[style_14, style_48]}>{"Ecti"}</Text>
                  </View>
                  <View style={[style_49, style_13, style_47]} wrap>
                    <Text style={[style_14, style_48]}>{"Ncidun"}</Text>
                  </View>
                  <View style={[style_50, style_13, style_47]} wrap>
                    <Text style={[style_14, style_48]}>{"Tinne"}</Text>
                  </View>
                  <View style={[style_51, style_13, style_47]} wrap>
                    <Text style={[style_14, style_48]}>{"Quen ULL"}</Text>
                  </View>
                  <View style={[style_52, style_13, style_47]} wrap>
                    <Text style={[style_14, style_48]}>{"Amultric Eses"}</Text>
                  </View>
                  <View style={[style_53, style_13, style_47]} wrap>
                    <Text style={[style_14, style_48]}>{"Tvenena"}</Text>
                  </View>
                </View>
                <View style={style_54}>
                  <View style={[style_55, style_47, style_56]} wrap>
                    <Text>{"tisvene:natispul"}</Text>
                  </View>
                  <View style={[style_57, style_47, style_56]} wrap>
                    <Text>{"vinarurn"}</Text>
                  </View>
                  <View style={[style_58, style_47, style_56]} wrap>
                    <Text>{"au-RN"}</Text>
                  </View>
                  <View style={[style_59, style_47, style_56]} wrap>
                    <Text>{"aele://men.tumleoi.ddi/c6u-meste345.sed"}</Text>
                  </View>
                  <View style={[style_60, style_47, style_56]} wrap>
                    <Text>{"tu-RP,is-PH;a=8.9,ll;u=3.4"}</Text>
                  </View>
                  <View style={[style_61, style_47, style_56]} wrap>
                    <Text>{"Uisla cu SEGE tauguee"}</Text>
                  </View>
                </View>
              </View>
            </View>
          </View>
        </View>
      </Page>
    </Document>
  );
};

Font.register({
  family: "Noto Sans",
  src: "https://fonts.gstatic.com/s/notosans/v36/o-0mIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjcz6L1SoM-jCpoiyD9A99d.ttf",
});

ReactPDF.render(<Example />, "output.pdf")

Expected behavior
ReactPDF.render() completes

Screenshots
N/A

Desktop (please complete the following information):

@react-pdf/renderer v4.0.0 on Node 20 (also hangs the REPL).
@cosdon
Copy link
Author

cosdon commented Sep 25, 2024

I think part of the problem may be here:

  // If the child is already at the top of the page, breaking won't improve its presence
  // (as long as react-pdf does not support breaking into differently sized containers)
  const breakingImprovesPresence = child.box.top > child.box.marginTop;

This doesn't take into account padding at the top of the page or fixed elements that will always appear before the node, so shouldBreak will return true even though the node is already as high up the page as it can go.

@cosdon
Copy link
Author

cosdon commented Oct 3, 2024

Minimal example:

const Example = () => {
  return (
    <Document>
      <Page style={{ paddingTop: 30 }} size="LETTER">
        <View style={{ height: 761, marginBottom: 24 }}></View>
        <View style={{ height: 80 }}></View>
      </Page>
    </Document>
  );
};

ReactPDF.render(<Example />, "output.pdf")

@cosdon cosdon linked a pull request Oct 3, 2024 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Take padding into consideration when deciding to break on minPresenceAhead cosdon/react-pdf
3 participants
@cosdon and others