React's constant rerendering of an overflowed component results in a jarring page jump

To view the code as a reference, click here.

After pressing the button, the state changes and #container1 gets replaced with #container2. Despite this change, the page height remains constant and the outer containers maintain their original height. However, when scrolling down to reach the button and then pressing it, the page jumps up to the middle unexpectedly. It's puzzling because no layout adjustments were made, only the text was altered.

I'm trying to ensure that the container heights remain fixed even when the text inside overflows. The issue seems to be related to the overflow causing this sudden page jump problem.

Here are some interesting observations:

  • The bug doesn't occur if #container2 contains only 1 div element.
  • This bug occurs only on the initial transition from #container1 to #container2. Subsequent transitions will trigger the issue if you have scrolled up while viewing #container1.
  • The bug is reproducible in various modes like "Toggle Responsive Preview" for "Tablet" or "Desktop". However, opening the page in a new tab prevents the bug from appearing.
  • While I noticed this bug primarily in Chrome, testing revealed that it also affects Firefox and Edge browsers.
javascripthtmlcssreactjs

Answer №1

The main issue lies here:

<div id="box1">

Your box1 will not automatically adjust its height based on its parent unless specified.

To fix this, update it to the following:

<div id="box1" style={{ height: "100%" }}>

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

Implementing Microdata with React and Typescript: A Comprehensive Guide

Whenever I include itemscope itemtype="http://schema.org/Product" in h1, an error pops up: The type '{ children: string; itemscope: true; itemtype: string; }' is not compatible with the type 'DetailedHTMLProps<HTMLAttributes<HTMLH ...

reactjstypescriptmicrodata

Creating a ref in React with TypeScript to access the state of a child component

Is there a way to access the state of a child component within the parent component without using handlers in the child or lifting the state up in the parent? How can I utilize refs in React with TypeScript to createRef and retrieve the child's state ...

node.jsreactjstypescriptreact-typescript

Struggling to spot my error (codewars, javascript, level 8)

Can You Translate?! After receiving a message on WhatsApp from an unfamiliar number, you wonder if it's from the person with a foreign accent you met last night. Your task is to write a simple function that checks for various translations of the word ...

javascript

Unlock the secrets of creating a pop-up with qtip

I am working on qtip code that generates a popup when a specific link is clicked. I'm wondering if there's a way to use jQuery to determine if the link with the id "test2" has been clicked or not. Thank you, James <ul> <li><a id= ...

javascriptjquerydhtmlqtip

Sending a variable to a function in JavaScript (winJs) from a different function

Greetings! Currently, I am developing a Windows 8 app using Java Script. function fetchFromLiveProvider(currentList, globalList,value) { feedburnerUrl = currentList.url, feedUrl = "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&outpu ...

javascriptjsonwinjs

Receiving an unknown result from the bodyParser function

Currently, I am in the early stages of learning nodejs + express + handlebars and facing some challenges with my post request. The issue lies in extracting data for "province and municipality" from req.body.province and req.body.municipality, which is not ...

htmlnode.jsexpresshandlebars.jsbody-parser

Facing a problem with querying interfaces and types in TypeScript

My goal is to pass a variable to an RTK Query API service that uses a typescript interface: const device_id: unique symbol = Symbol(props.id); const { data: device, isFetching, isLoading, } = useGetAssetsByIdQuery(device_id, { pollingInterv ...

javascripttypescriptrtk-query

Scaling Youtube video backgrounds with Squarespace

How can I inject a code into Squarespace to scale a video as the background and still keep the navigation functional? Here is the current code I am using: <div style="position: fixed; z-index: 50; width: 100%; height: 100%"> <iframe frameborder= ...

htmlcssiframe

How to target and set focus on dynamically generated input field when the ID is unknown

I am facing an issue with a jQuery/AJAX function that loads HTML form elements from the server. The form fields vary, and I want to set focus on the first available input field after the load is complete. I have tried: $(':input:enabled:visible:firs ...

javascriptjqueryfocusforms

Loading a page via AJAX without triggering a reload of the entire website

I am experimenting with loading content from a different page using AJAX. The website I am currently testing on is dev.dog-company.com. Here's the code snippet that I have been working on: $('a[rel="load"]').click(function(){ //var sit ...

javascriptajaxjquery

What is the best way to execute a .js file with a Mocha suite repeatedly within a loop?

I have a collection of .js test files and I am looking for a way to execute the tests in each file multiple times. Ideally, I would like to run them 5 or 10 times consecutively. Even if it's just one file at a time, but running it multiple times. I a ...

javascriptnode.jstestingmocha.jsintegration-testing

Verify whether the division contains any elements and does not include specific elements

I previously opened a similar thread, but with the condition that the div does not contain a second element within it. So my previous question was as follows: I have some code that looks like this: <p class="elementWrap"> <label>Phone</l ...

javascriptjqueryhtmlcss

What could be the reason my JavaScript alert is not functioning properly?

Having some trouble with my form validation using Bootstrap - the alerts aren't showing up when I submit the form. Not all of the alerts have been added yet. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

javascripthtmltwitter-bootstrap

What is the best way to retrieve a JSON key in ReactJS?

I am currently facing a rendering issue. In my componentDidMount function, I am using axios to make a GET call and then updating the state with the received JSON data. The problem arises when I try to access the keys of the JSON in the render method becau ...

javascriptjsonreactjs

Identifying and implementing page language in nextJS: Solving the ReferenceError "window is not defined" issue

I am currently working on developing a website that can automatically detect the user's country and set the language accordingly. In React, I usually achieve this by using window.navigator.language. Here is a snippet of the code: import * as pt from ...

javascriptnode.jsreactjsnext.jsserver-side-rendering

"Encountered a Chrome RangeError: The call stack size limit was exceeded while utilizing jQuery's $

As part of my job, I am currently evaluating a web application that involves fetching a substantial amount of data from the server. The data is received as a JSON object using the $.ajax function. It contains numerous sub-objects which I convert into array ...

javascriptjquerygoogle-chromeweb-applicationsbrowser

Tips for efficiently importing a file or folder that is valuable but not currently in use

I'm struggling to find any information about this particular case online. Perhaps someone here might have some insight. I keep getting a warning message saying 'FournisseursDb' is defined but never used no-unused-vars when I try to import t ...

javascriptreactjsimport

Increase the value of X within the given string

I am working on developing an application that transforms the initial string: 1.2.3.X Into multiple strings: 1.2.3.0 1.2.3.1 1.2.3.2 1.2.3.3 1.2.3.4 ...... This is a snippet of the code I have written so far: String.prototype.count=function(c ...

javascriptarrays

What is the best way to make a span's background color stretch to 100% width?

Is there a way to make the background of a span element stretch to the full width of its parent container? Just to Clarify I understand that using divs is an option, but it feels more like a workaround than a genuine solution to the issue. (di ...

htmlcss

using post request axios to send parameters

I am looking to make a post request using axios with an object as the payload. employee:{ name: 'test', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d79687e794d6a606c6461236e6260">[email ...

javascriptvue.jsvuejs2