Visual Builder

I am using a drawer to display the preview for documents (for example pdfs). This works perfectly fine on fullscreen, but if I toggle the preview to be mobile-phone-sized, I only get a white screen.

Is there something going wrong or is preview of pdfs on mobile not supported?

<!-- oj-drawer-popup Component -->

<oj-drawer-popup edge="end" id="PopUp" opened="{{ $variables.showImagePopUp }}" class="responsive-drawer">

<!-- Close button "X" -->

<button id="closeBtn" data-bind="click: $variables.showImagePopUp= false" style="position: absolute; top: 10px; left: 10px; background: transparent; border: none; font-size: 20px; cursor: pointer; color: white;">&#x2715;</button>

<!-- Image Display OR document preview -->

<div style="height: calc(100% - 50px);"> <!-- Adjust height to leave space for the close button -→

<object :data="[[$variables.blobInPopUp ? URL.createObjectURL($variables.blobInPopUp) : $variables.blobInPopUp ]]" style="width: 100%; height: 100%;">

</object>

</div>

<!-- Navigation Buttons -->

<div>

<oj-bind-if test="[[$page.variables.documentsInPopUpList.length > 1]]" >

<button id="prevBtn"

style="position: absolute; left: 10px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; padding: 10px;"

on-click="[[$listeners.prevBtnClick]]">&#8249;</button>

<button id="nextBtn"

style="position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.5); color: white; border: none; cursor: pointer; padding: 10px;"

on-click="[[$listeners.nextBtnClick]]">&#8250;</button>

</oj-bind-if>

</div>

</oj-drawer-popup>