I am having a weird issue. In Javascript, I am loading content from an external url, which is return a Blob, and then I am setting that blob to an Iframe's src. The code is this:

let url = 'https://www.example.com/';

let ifrm = document.createElement('iframe');

let xhr = new XMLHttpRequest();

                xhr.open('GET', url);
                xhr.onreadystatechange = function() {
                    if (this.readyState === this.DONE) {
                        if (this.status === 200) {
                            // this.response is a Blob, because we set responseType above
                            var data_url = URL.createObjectURL(this.response);
                            ifrm.setAttribute("src", data_url);
                        } else {
                            console.log(type);
                            console.log(url);
                            console.error('Unable To Set IFrame SRC');
                        }
                    }
                };

                xhr.responseType = 'blob';
                xhr.send();

The content inside the iframe renders correctly in every browser and OS: Windows, Mac Laptops, iPads, etc. But for some reason on iPhone, and only on the iPhone, it wraps all the content in a tag thus rendering actual html inside the iframe.

Does anyone have an idea why this is happening and how to fix?