Why does the iframe on iOS keep flickering when resizing?

I have been attempting to integrate chess games from into a website for one of my clients. The embedding javascript successfully sets up the listener and the embed page communicates with the message to resize, as recommended by various stackoverflow posts. Everything works smoothly on all browsers, including those that have cross domain restrictions. However, when testing on iOS devices (both Safari and Chrome), the test page experiences constant flickering, even when there is no interaction happening. It seems like Safari may be adjusting the width of the iframe repeatedly. You can view the test page here:

Despite investing significant time in troubleshooting this issue, I have not been able to identify a solution yet.

Answer №1

The reason for this issue is related to a bug in the open iOS safari:

Update: Fortunately, this problem has been resolved with the release of iOS 13

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

What is the best way to retrieve variables from child components within a parent component in React?

I'm currently diving into React by working on a form/calculator application. I've come to realize that React follows a unidirectional pattern, and I'm struggling with how to deal with it. My goal is to create a table where users can input i ...

What could be the reason for Object.assign failing to update a key in my new object?

Function handleSave @bind private handleSave() { const { coin, balance } = this.state; console.log('coin', coin); console.log('balance', balance); const updatedCoin = Object.assign({ ...coin, position: balance }, coi ...

Ways to retrieve a specific value in an array of objects

When working with the p5 javascript library, there is a convenient built-in function called {key} that captures the key you press. For instance, using text(${key},200,200) will display the key pressed at position 200, 200 on the canvas. If I were to stor ...

The process of how React attaches event listeners to elements created through the map method

Upon clicking discountKeyboard, an error was encountered: Alert: Functions cannot be used as a React child. This issue may arise if you return a Component instead of from render. Alternatively, it could be due to calling the function rather than returnin ...

Attempting to use 'user' before it has been initialized is not allowed

I'm encountering a "Cannot access 'user' before initialization" error in my Mern development controller file for a signup function. Controller/user.js const user = require('../models/user') exports.signup = (req,res)=>{ cons ...

Navigating through the collection of customizable alert dialog options in Flutter

I'm currently working on a dialog that features a scrollable list within it. Some challenges I am facing include: When there are too few items, the dialog does not resize accordingly. With a large list, the buttons overflow outside the dialog box. ...

Using axios.spread() allows for caching of my API requests, a feature that is not available when

Thank you for taking the time to read this. I find myself in a peculiar situation where I am required to invoke multiple CMS API routes from my server to incorporate their response.data into an object that will later be transferred to the client side. The ...

Unveiling the hidden gems: Retrieving data from JSON in Swift for iOS9

I am facing a challenge with extracting specific values from JSON data retrieved from a server. The data is structured in such a way that the values are nested within another dictionary, making it difficult for me to access them. I am looking to extract th ...

Having trouble getting my JavaScript code to function properly on Firefox browser

I have created a script where the cursor automatically moves to the next form field once it reaches its maximum length, in this case 1. Here is the JavaScript code: window.onload=function(){ var container = document.getElementsByClassName("container")[0] ...

Retrieve the request body within the validation function of express-validator version 4

Recently, I began using express.js along with express-validator to validate input data. However, I have encountered a problem when trying to access the request body in the new check API introduced in version 4.0.0. In previous versions, it was simple to a ...

AngularJS directives and controller scope

I'm looking to create a custom directive in AngularJS that generates a div element as a title and a ul list below it. The title should be customizable through an attribute, while the list content is controlled by a designated controller. Check out t ...

Tips for successfully incorporating a jQuery plugin into your React project

I'm attempting to incorporate the Air Datepicker library by t1m0n into my React application, but I'm encountering difficulties. import React from 'react'; import AirDatepicker from 'air-datepicker'; class Datepicker extend ...

Toggle dark mode in child Layout component with React and Material-UI

Trying to incorporate a dark mode switch in a React+MUI (JS) layout component has been quite challenging. I have been struggling to find a solution using states for this feature. The main goal is to toggle between light and dark modes by utilizing a switch ...

Exploring the power of D3's nested appends and intricate data flow

Currently diving into the world of D3, I've encountered a perplexing issue that has yet to be resolved. Unsure if my confusion stems from a lack of familiarity with the library or if there's a key procedure eluding me, I feel compelled to seek gu ...

How does AJAX relate to XML technology?

Well, let's clear up this misconception about XML and AJAX. The term "Asynchronous JavaScript And XML" may seem misleading because you can actually use an XMLHttpRequest object to fetch not just XML, but also plain text, JSON, scripts, and more. So w ...

There seems to be an issue when trying to retrieve data from a JSON array stored

I have a SQL table with a column that stores JSON arrays. I am able to retrieve the data using Node.js, but when I try to manipulate the JSON array, I encounter errors consistently. Here is an example of my JSON array in the SQL database: { characters: [{ ...

What is the best way to merge two nested arrays of objects in JavaScript that share a common parent?

Hello everyone, I am facing an issue when trying to combine two nested parent arrays of objects. I want to merge only the children items that have the same group parent. Here is my scenario: I have two arrays var arr1 = [{group: "a", items: [&quo ...

JavaScript error: Cannot read property 'str' of undefined

I'm attempting to retrieve specific values from a JSON array object, but I encounter an error message. var i = 0; while (i < n) { $.get("counter.html").done(function (data2) { var $html = $("<div>").html(data2); var str = ...

Capturing the submit button using JavaScript and checking its presence with PHP's isset function

Appreciation is extended to all users of the site who take the time to respond to my inquiry. The main aim of my question, as indicated by the title, is to capture the form submission in JavaScript using the traditional PHP isset method. Sample Code: < ...

Incorporate an XML buffer into the form data

Currently, I am facing an issue while attempting to upload an XML file using superagent (Protractor Testresults) within a NodeJS context. My approach involves using 'fs' to read the XML file using readFileSync, which results in a Buffer Object fo ...