PDF does not render in expander in Safari

[mtanco]

Wave SDK Version, OS

• Wave 1.0.0+
• Safari (Chrome works as expected)

Actual behavior

• When a PDF is in an expander with a ui.text or ui.markup object, if you open and close the expander, the PDF will no longer render

Safari on left, chrome on right. Pic one is visiting the app, pic two is closing and opening the expander

Steps To Reproduce

from h2o_wave import main, app, Q, ui

@app('/')
async def serve(q: Q):

    q.page["meta"] = ui.meta_card(
        box="",
        layouts=[
            ui.layout(
                breakpoint="xs",
                height="100vh",
                zones=[
                    ui.zone("main", direction="row", size="1"), # size=1 to take up all the space on the screen
                ]
            )
        ]
    )

    q.page["pdf_from_public_website"] = ui.form_card(
        box="main",
        items=[
            ui.expander(name="test", items=[
                ui.markup(
                    content="<object data='https://arxiv.org/pdf/2401.16818.pdf' "
                            "type='application/pdf' width='100%' height='1000px'></object>")
            ])
        ]
    )

    await q.page.save()

[marek-mihok]

Seems like Safari has some weird bug (probably related to caching?) when switching between display: 'none' and display: 'block' CSS props for ancestor elements of <object> tags containing pdf files.

You can use <iframe> instead:

ui.markup(
   content='<iframe src="https://arxiv.org/pdf/2401.16818.pdf" style="width: 100%;height: 1000px; border: none;"></iframe>'
)

@mturoci, there is also the option to use height: 0, width: 0, visibility: 'hidden' instead of display: 'none', but this solution would load pdfs even if the user never opens the expander.

The question is whether we are going to implement a new ui.document component OR a docs section suggesting the use of iframe for pdfs would be enough.

Either of the solutions would target both #2291 and #2292.

[mturoci]

Would something like this work?

q.page['example'] = ui.form_card(box='1 1 4 4', items=[
    ui.frame(path='<pdf_path>')
])

[marek-mihok]

It would, but when inside expander, the first page appears blank in Safari until scrolled:

https://github.com/h2oai/wave/assets/23740173/37afa6df-6e44-4e07-91b4-478488f5d743

  q.page["example"] = ui.form_card(
      box="1 1 8 8",
      items=[
          ui.expander(name="test", items=[
              ui.frame(path='<pdf_path>', height='1200px', width='100%')
          ])
      ]
  )

[EDIT] I've re-run the app and the server and I was not able to reproduce it anymore. Works like a charm on all supported browsers.