Seems strange... why won't the iframe load until it's interacted with?

I've created a unique HTML/CSS marquee that pulls overlays from a website through iframes and scrolls through them. However, I'm experiencing some strange behavior on the page.

Upon initial page load and passive viewing, only the first overlay is displayed. It scrolls in as expected, exits, and then there's nothing until the animation cycles back - showing the first overlay again.

However, if I interact with the page by clicking/moving the mouse within it, each iframe loads sequentially, with each one scrolling in and out as intended.

If I interact briefly and then stop, the original issue resurfaces, but this time the last loaded iframe is the one that repeats instead of the initial one.

"Interacting" refers to having the page focused and engaging with any clickable or hoverable elements on the page.

Below is the code snippet. Please disregard the "display" statements in the animations which were added for experimentation purposes.

<html>
<head>
    <style>
        // CSS animations for displaying iframes and scrolling effects

    </style>
</head>
<body>
<div class="marquee">
        <iframe class="marquee" src="https://tracker.gg/overlays/overlay/347710c7-d003-47ec-8c56-29269060692c"></iframe>
        <iframe class="marquee" src="https://tracker.gg/overlays/overlay/687c5759-99f1-4f40-95c3-377cfb1751be"></iframe>
        <iframe class="marquee" src="https://tracker.gg/overlays/overlay/b8efb59c-02ae-4edf-9c9d-50a6d1643064"></iframe>
        <iframe class="marquee" src="https://tracker.gg/overlays/overlay/80fc2dab-f197-452e-827d-36aafdeca87d"></iframe>
        <iframe class="marquee" src="https://tracker.gg/overlays/overlay/76576b68-97aa-42a5-a5e4-45574ab0d3e9"></iframe>
        <iframe class="marquee" src="https://tracker.gg/overlays/overlay/fe174a33-4b60-4bcd-aed6-3188dbf1d432"></iframe>
        <iframe class="marquee" src="https://tracker.gg/overlays/overlay/7c1a3a59-7540-4c15-a5b4-24d19dbd5880"></iframe>
        <iframe class="marquee" src="https://tracker.gg/overlays/overlay/ebc95461-8851-4576-a8bf-0f8aec7c9d46"></iframe>
        <iframe class="marquee" src=""></iframe>
        <iframe class="marquee" src=""></iframe>
</div>
</body>
</html>
javascripthtmlcssiframe

Answer №1

The issue appears to be stemming from the browser's attempts at being overly sophisticated....

The problem arises due to having a translate(100%) on the iframes in conjunction with overflow hidden on the parent element.

If you eliminate either of these configurations, everything functions as intended. In other words, the iframes will begin to display after a brief delay and seamlessly move within and outside the visible parent container.

When both settings are active, it seems as though the system has decided 'that iframe is not visible so I won't interact with it' and fails to acknowledge that the subsequent transformation should render it visible.

As for why a mouse action triggers this change? The exact mechanism behind a browser's decision to repaint is unknown to me, but it does seem like that's what occurs. A mouse event prompts a reflow, prompting the system to recognize an iframe's visibility and reveal it. Hopefully, someone well-versed in browser intricacies can offer a clearer explanation.

In any case, a remedy for this problem would involve removing the transform: translateX(100%) property from the iframes. The system then appears to realize the iframe's visibility.

<html>
<head>
    <style>
        @keyframes mq1 {
            0%  { display: show; }
            0%  { transform:translateX(100%);   }
            1%  { transform:translateX(0);      }
            9%  { transform:translateX(0);      }
            10% { transform:translateX(-100%);  }
            10% { display: hidden; }
            100%    { transform:translateX(-100%);  }
        }

        @keyframes mq2 {
            ...
            /* Additional keyframes declarations */
            ...
        }

        /* Styles for marquee and iframe elements */

    </style>
</head>
<body>
<div class="marquee">
    /* Iframe elements with associated src attributes */
</div>
</body>
</html>

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

Having trouble getting jQuery css() function to work properly?

<a href="https://www.timeatthebar.co.uk" target="_blank"><img id="icon-img" src="assets/img/tabicon2.png" class="position-absolute top-50 start-50 translate-middle" style="max-width:113px; top ...

javascripthtmljquerycssonclick

Ordering ng-repeat in AngularJS using a separate arrayDiscover how to easily order your

Imagine I have an array containing keys in a specific order orderedItems=["apple","banana","orange]; and there is a JSON object that I want to display using ng-repeat but following the sequence specified in the array: {"fruits": { "apple":{ ...

javascriptarraysangularjsangularjs-ng-repeatangularjs-filter

Combining various postponed JavaScript file imports in the HTML header into a single group

I've been facing an issue with my code structure, particularly with the duplication of header script imports in multiple places. Every time I need to add a new script, I find myself manually inserting <script type="text/javascript" src=&q ...

javascripthtmljquery

Discover ways to circumvent using multiple conditions in a switch statement for a solitary object

Receiving an object from the client side in this format: var condition={"bedrooms":"1,2,3,4","Inhibition":"1,6","possession":"3","id":"8",toilets:"1,2",...,} The object must have the same keys and only be a single object, but its length can vary (1/2 ...

javascriptangularjsnode.js

The performance of the image slider is not smooth

After creating a basic javascript/css image slider as a learning exercise, I am now looking to implement it in real-world projects. However, the animation is choppy on my high-spec desktop and even worse on mobile devices. You can view the slider in action ...

javascripthtmlcsstransform

Creating a personalized contact form with a mailto link that also includes the ability to automatically copy information into the email

I'm in the process of developing a basic contact form that includes input fields for name and subject, as well as a send button (which is an <a> element inside a <div>. I am utilizing an <a> tag because I intend to use mailto functio ...

javascripthtmlcssmailto

What is the process for including echo HTML field in the WooCommerce order view?

I have successfully added HTML input fields within functions.php. However, these echoed fields are not displaying in WooCommerce orders after placing an order. I am looking for a way to include the values and labels of these fields in the orders view wit ...

javascriptphpwordpresshtmlwoocommerce

Splitting a text string in PHP: Separating song titles from artist names

Here is a snippet of PHP code that retrieves artist and title information: <?php //get artist/title info $artist = $_GET['artist']; $title = $_GET['title']; //create a temp file to store values for AJAX script $r = fopen("temp_titl ...

phphtmlajax

What is the best way to show the user profile on a Forum?

I am struggling to figure out how to display the username of a user on my forum page. I currently only have access to the user's ID and need help in extracting their name instead. It seems that I lack knowledge about mongoose and could really benefit ...

javascriptreactjs

Tips for enabling browser back and forward functionality in a one-page website design

Building on the previous discussion about optimizing a horizontal sliding layout (Most efficient way to do a horizontal sliding layout), I'm curious if it's feasible to enable the back and forward buttons in the browser when implementing a single ...

javascripthtmlbrowsercross-browseruser-experience

Ordering items in Angular-js ng-repeat using a complex orderBy function

------- Updated query ----- I am struggling with implementing the orderBy function along with limitTo: Here is an example: orderBy id limitTo 1 'adam1@xxx' - id:10 'adam2@xxx' - id:20 'adam3@xx' - id:16 Then, I need to ...

javascriptangularjsangularjs-ng-repeatangularjs-orderby

Obtain a pointer to the timestamp within a embedded Kibana chart on an HTML webpage

The image at the specified link shows a black box labeled @timestamp displaying date and time information. Unfortunately, viewing the image requires a reputation of 10. Link to image: https://www.elastic.co/assets/bltde09cbafb09b7f08/Screen-Shot-2014-09-3 ...

javascriptjqueryhtmlkibana-4

Choosing a specific option from a dropdown menu in Angular

Whenever I try to update the province of a person using the dropdown list, it doesn't display the old province value. This issue seems to be related to the HTML rendering. This dropdown list is a crucial part of the person's information that I f ...

htmlangulardropdown

Converting a Powershell array into an HTML format

I have three arrays that I need to display on an HTML page: foreach($item in $array1){ // write array data to HTML } foreach($element in $array2){ // write array data to HTML } foreach($value in $array3){ // write array data to HTML } What is the ...

htmlarrayspowershell

What methods can be utilized to retrieve multiple objects based on their names?

It appears that it's not necessary for objects in the scene to have unique names; multiple objects can share the same name... If I need a list of these objects, do I need to create a getObjectsByName method or is there an alternative way to achieve t ...

javascriptthree.js

Issue with uniform sizing of Bootstrap card-deck components

I have set up a display of card decks to showcase a collection of articles pulled from a database. The code snippet I am currently using is fairly simple: HTML <div class="row"> <div class="card-deck"> <template is="dom-repeat" ...

cssbootstrap-4

The power of dynamic view naming within ui-router states in AngularJS

Currently, I have a ui-view set up as follows: <div ui-view="filtersView_ModalA" class="filter-container"></div> Now, my goal is to create generic routes that can accommodate any new filterView implementations. For example: <div ui-view=" ...

javascriptangularjsangular-ui-router

Insert a new, unique div onto an HTML webpage using JavaScript, ensuring no duplicates are created

Having an issue with this code snippet where nothing is being added. It seems like the variable result may not be taking a number or something else, but I'm not entirely sure why. $(document).ready(function () //document.getElementById(1).style. ...

javascriptjqueryhtmlcss

Tips for optimizing re-rendering in Redux when a single state changes to avoid unnecessary updates in other components

I recently completed a React project that utilizes Redux for state management. In this project, I have implemented two different states stored in the same reducer and accessed by separate components. However, I've encountered an issue where changing t ...

javascriptreactjsreduxrender

Try incorporating "vector.applyQuaternion" or a similar method in your code within ammo.js

I'm eager to develop a virtual reality shooting game for browsers, utilizing Three.js and Ammo.js for the physics engine and rigid bodies. Although I've successfully set up the VR headset, controllers, and loaded models, I encountered an issue wi ...

javascriptthree.jswebvrrigid-bodiesammo.js