Issues with displaying iframes on iOS devices, particularly iPhones

There is a strange issue I am encountering with iframes not displaying on certain phones while working perfectly on others. (They show up fine on all android devices) (However, they do not work on iphone 6 and 7 but surprisingly work on 7 plus, 7S, and a few other iPhone models)

<div class="col-lg-6 col-md-6">
 <iframe src='http://app.brandyourcar.com/signup/index/form-main-display-group-thingy' style='border: 0;' width='100%' height='770px' scrolling='no'></iframe>
</div>

I have experimented with various solutions found on Stack Overflow, but none seem to be effective for me.

Here are a couple of examples: 1.) 

<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="url" />
</div>
2.) 
<div id="scroller" style="height: 400px; width: 100%; overflow: auto;">
<iframe height="100%" id="iframe" scrolling="no" width="100%" id="iframe" src="data/testdocument.pdf" />
</div>
along with several other JavaScript-based solutions.

ioscssiphoneiframe

Answer №1

The reason behind this issue is due to the recent updates in Safari which introduced a security mechanism known as "prevent cross site tracking". This feature blocks third-party cookies by default, causing certain functionalities to be affected. While users have the option to disable this setting, I am currently exploring alternative solutions to address this without requiring user intervention. In the meantime, one workaround is to check for the status of third-party cookies and display a helpful message on how to manage this feature if they are disabled.

I trust this information proves beneficial in resolving the situation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Delayed hover dropdown navigation menu powered by Bootstrap

I am experimenting with creating a bootstrap dropdown menu that opens and closes on hover, but only after a 250ms delay for desktop devices. Custom JavaScript: $(document).ready(function() { if ($(window).width() > 767) { $(".dropdown-toggl ...

htmljquerycsstwitter-bootstrapdrop-down-menu

When the flexDirection is set to row, Material-UI input labels will appear outside of

Currently, I am facing an unusual situation. In my code, I have incorporated 2 div elements within a FormControl, and everything appears to be working correctly with the input label for the Select. However, when I apply styling with flexDirection: 'ro ...

cssreactjsmaterial-ui

Incorporating a classList.toggle into a snippet of code

button, p, h1, h2, h3, h4, h5, a{ /* Define specific elements to use "fantasy" font */ font-family: Tahoma; } #main_body{ margin: 0px auto; background-color: #dedede; } #top_body{ /* Remove margin for simplicity */ } #t ...

javascripthtmlcss

Listening for events to wait for all XMLHttpRequest requests within an iframe

I have a basic HTML page that includes an iframe element <html> <head> $('#page-wrapper').ajaxStop(function() { console.log("Page Fully Loaded." ); }); </head> <body> <h3>Demo Page<h3> <iframe id= ...

jqueryhtmlajaxiframe

Best practices for resolving classlist.toggle issues with my dark mode button

The code seems to work only the first time, but after activating light mode again, the sun stops appearing. How can I ensure that the 'bi-sun' class is added back every other click or when dark mode is not activated? function theme() { do ...

javascripthtmlcsssveltekit

The website functions perfectly on a local server, but once it's uploaded, the images fail

My website is functioning properly on my computer, however, after uploading it to the server, I noticed that some of the links are not appearing. Upon inspecting these links through developer tools, it shows an image size of 'Natural 1 X 1' despi ...

htmlcss

Interactive HTML/CSS Periodic Table with Dynamic Design

Recently, I have been immersing myself in learning about responsive design in HTML/CSS and decided to challenge myself by coding the periodic table of elements using HTML/CSS to hone my skills. While I have set up the basic structure of the table with div ...

htmlcss

You can only import Next.js Global CSS from your Custom <App> and not from any other files

Initially, my React App functioned perfectly with global CSS included. However, after running npm i next-images, adding an image, modifying the next.config.js file, and executing npm run dev, I encountered the following notification: "Global CSS cannot ...

cssreactjsimportsassnext.js

Responsive design with Flexbox, interactive graphics using canvas, and dynamic content resizing

I'm having difficulties with my canvas-based application. I have multiple canvases, each wrapped in a div container alongside other content. These containers are then wrapped in an "hbox" container. The objective is to create a dynamic grid of canvas ...

javascriptcsshtmlcanvasflexbox

The Jquery Addclass function is not functioning properly

I have been struggling with this code as it seems to not be working in any browser, including IE, Chrome, and Firefox. I suspect that the system should add a class, so I checked the DOM using Chrome's console. I did see the class being added, but ther ...

jquerycssjquery-animateaddclass

Tips on revealing concealed information when creating a printable format of an HTML document

I need to find a way to transform an HTML table into a PDF using JavaScript or jQuery. The challenge I'm facing is that the table contains hidden rows in the HTML, and I want these hidden rows to also appear in the generated PDF. Currently, when I co ...

javascripthtmljquerycss

Animate CSS during page load

Currently, I am implementing AJAX to dynamically load pages on my website. During the loading process, I wish to incorporate a spinning animation on the logo to indicate that content is being fetched. The jQuery script (although I'm still learning an ...

javascriptjquerycss

What steps can I take to ensure that the text content stays within the borders and does not overlap with the photo?

click here for the image description Html <p><img src="index-foto1.jpg" align="left" width=65% style="border-radius: 10px;" margin-right: 2px> <div class="tant"><h3>More detailed inform ...

htmlcss

The CSS file stubbornly refuses to connect, opting instead to redirect back to the HTML file

Something strange has occurred. I was working on a React app and everything was functioning properly until today when I returned to it, and my CSS file wasn't linking for some reason. The only actions I took were running npm run build and npm run depl ...

htmlcssreactjshyperlink

Decoding JSON data in Objective-C

When processing the contents of a .json file, why is it that a string like "jamie's" appears as "jamie &#039;s"? Can anyone explain this phenomenon? ...

iphonejson

jQuery is great at adding a class, but struggles to remove it

When you click on an anchor with the class .extra, it adds the "extra-active" class and removes the "extra" class. However, when you click on an anchor with the extra-active class, it does not remove the extra-active class and replace it with extra. Here ...

javascriptjqueryhtmlcss

What is the best way to place text alongside a shape?

I'm attempting to place text beside the circular shape. HTML <div class="row"> <div class="col-sm-2"> <span><div class="circle"></div></span><p>available</p> </div> </div> C ...

htmlcsstwitter-bootstrap-3

Utilizing a CSS file within a YAML configuration in R Quarto

Is there a way to reference a css file from a yaml file in my R Quarto Book? The css file defines the theme for my Quarto document, and I want all our Quarto docs to have the same appearance. When I directly call the css file, I can customize aspects like ...

cssryamlquarto

Is there a way to customize the design of the "Browse" button within the HTML file upload control?

I've been searching high and low on the internet for a simple, sleek method to customize the appearance of the Browse button on an HTML <input type=file> element. However, all the solutions I've come across involve hiding controls, placing ...

htmlfile-uploadcss

Steps for making a grid within a bootstrap 3 modal

I am new to HTML and CSS I'm working on creating a modal content similar to this: https://ibb.co/RvrhmRs Most of the work is done, but my modal currently looks like this: https://ibb.co/1zG0y2t I just need help arranging an icon next to the text. ...

htmlcsstwitter-bootstrap-3grid