Html2canvas перекрывает один элемент другим в мобильном представлении ⇐ CSS

[Anonymous]

Я пытаюсь сохранить PNG определенного div. в области просмотра ноутбука/ПК он работает правильно, и я получаю желаемый результат, изображение ниже


на телефоне я получаю что-то вроде этого


это код, который я использую для создания png и загрузки

Код: Выделить всё

  const handleDownload = () => {
html2canvas(qrContainerRef.current).then((canvas) => {
const link = document.createElement("a");
link.download = "qr-code.png";
link.href = canvas.toDataURL("image/png");
link.click();
});

};
вот код контейнера/div, который я пытаюсь сохранить как png. все работает нормально, просто расположение контейнеров перекрывается, когда я загружаю на мобильный телефон. на ПК/ноутбуке все работает нормально.

Код: Выделить всё

Download QR


// rest of the code

ref={qrContainerRef}
className="bg-[#ebe6d3] w-full h-full flex flex-col justify-around p-4 items-center rounded-2xl shadow-xl"
>

{formData.upiHandle ? formData.upiHandle : 'Enter UPI Handle'}




Scan & Pay with any UPI app





// rest of the code

const QRCodeDisplay = ({ upiString }) => {
const qrRef = useRef(null);

useEffect(() => {
if (upiString) {
new qrious({
element: qrRef.current,
value: upiString,
size: 250,
});
}
}, [upiString]);

return (

{upiString ? (

) : (

)}

);
};

вы можете просмотреть всю кодовую базу replit здесь
вы можете использовать функцию URL-адреса разработчика replit для тестирования на мобильных телефонах
Пожалуйста, помогите мне

Подробнее здесь: https://stackoverflow.com/questions/786 ... obile-view