When a div is created outside of the viewport, the overflow scroll feature will fail to function properly

I am currently working on developing a full screen slider with a unique feature on the last slide: a horizontal scrolling area. To achieve a smooth animation, I am using CSS translations to bring the div within the viewport.

Oddly enough, the scrollbar does not function correctly unless the window is resized.

My theory is that when the scrollable div is initially positioned outside of the viewport, Chrome does not render it (potentially for performance optimization).

It seems that upon resizing the window, the entire layout is recalculated and redrawn, allowing the scrollbar to work as expected.

If you would like to see the issue in action, you can view this JSFiddle that I have created: http://fiddle.jshell.net/f3thbjqc/6/show/

Additionally, I have created a video showcasing the problem. You can watch it here: https://i.sstatic.net/QZUTA.gif

My current setup includes a Mac OS High Sierra operating system. Both Chrome 69.0.3497.100 and Safari 11.0.1 (13604.3.5) exhibit the same behavior, whereas Firefox does not show the same issue.

javascripthtmlcssscrolltransition

Answer №1

Encountered a familiar issue while working with the materiallize framework. I had tabs and a slider incorporated, but the slider was non-responsive. Strangely, after resizing the window, the slider functioned flawlessly.

Consider triggering this event manually when the slider is visible:

window.dispatchEvent(new Event('resize'));

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 primary function for Express.js and Node.js 10 in Google Cloud Functions?

My Node JS version is 10 Express JS version: 4.16.1 I understand that for Node JS 8, the entry point should be "app" The generated code (from `npm install -g express-generator) www #!/usr/bin/env node /** * Module dependencies. */ var app = require( ...

javascriptnode.jsexpressgoogle-cloud-functions

Is there a way for me to retrieve a variable from outside a function?

I'm trying to access a variable outside of the function in Next.js. I want to retrieve the 'name' from the data object after making an API call. let getDetail = async () => { let body = { code: '12', provider: & ...

javascriptreactjsnext.js

Removing an event from Fullcalendar

With the help of a post on StackOverflow, I managed to modify my select: method to prevent users from adding an event on a date before NOW. However, there is a drawback. When a user clicks on an empty time slot and the system displays an alert message, th ...

javascriptjqueryfullcalendar

Filtering in AngularJS can be done by combining two fields at

I attempted to implement similar code for filtering my tasks, but it seems to be malfunctioning. When I use just one filter, everything works fine regardless of which one I choose. However, when I attempt to filter by the second input, it simply does not w ...

javascriptangularjs

Exploring the Differences between Slim Framework's Currying and Dependency Injection

Frameworks like Angular allow for injecting services and controllers into each other, as shown in the code snippet below: App.controller('exampleController', function($scope, ajaxService){ ajaxService.getData().then(function(data) { ...

javascriptphpangularjsdependency-injectionslim

ajax - unable to fetch information from the same domain

UPDATE: The solution provided by Cavid Kərimov indeed works. By setting the form as shown below, it also resolves the issue. <form onsubmit="return false;"></form> I am attempting to fetch a simple text string from a PHP file using jQuery an ...

javascriptphpjqueryajax

The CSS menu dropdown fails to function properly on desktop view when there is longer content present

I attempted to merge two different navigation bars, one sticky and the other responsive. The goal was to combine https://www.w3schools.com/howto/howto_js_navbar_sticky.asp with https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp Curr ...

javascripthtmlcss

You cannot use a colon ( : ) in HTML input text fields

How can I prevent a colon from being inserted into an input text field? In my code snippet, I have <input type="text"/> and I want to ensure that if the user types " : ", nothing appears in the input text field. Is there a way to achieve this using ...

htmlinput

Despite having both React and Firebase enabled, the "sign-in provider" feature appears to be disabled

Within my Authentication settings, the Sign-in Method is configured to use Email and Password as enabled. I've set up a handler for form submission that looks like this: createUser(e){ e.preventDefault(); const email = this.createEmail.value ...

javascriptreactjsfirebasecreate-react-app

Incorporating an external SVG link into a React application

While I may not be an SVG expert, I haven't encountered any issues with loading SVGs in my React app so far. I prefer using the svg tag over the image tag because sizing tends to present problems with the latter option when working with external links ...

javascriptreactjssvg

Enhancing my code by implementing various conditions in React

Looking for ways to enhance my code quality (Very Important, Important, Medium, Low, Good, Excellent,...) : { Header: "Opinion", accessor: (row) => row.opinion, Cell: props => <span> {props.value == ...

javascriptreactjsreact-nativereact-hooks

Utilizing the Java Script SDK for Facebook API to Publish Actions

I've been encountering difficulties with the Facebook API. I have created an app, an object, and an action, and I'm trying to test publishing in my stream (I understand that public publishing needs authorization from Facebook, but as an administr ...

javascriptfacebook-graph-api

What is the best way to create a list from a matrix using JavaScript?

I have an array structured as follows: const input_array= [ ["red", "green"], ["small", "medium"], ["x", "y", "z"] //... can have any number of rows added dynamically ...

javascriptvue.js

Can we keep a portion of the input placeholder content?

The input box below accepts values in percentage form. To indicate this, I have set a placeholder that says Percentage (%). https://i.sstatic.net/LJ1ee.png My goal is to automatically add a % symbol to the value as soon as it is entered into the input fi ...

htmlcssbootstrap-4

Enhance the look of the dropdown menu

Seeking advice on enhancing the appearance of a dropdown menu in an ASP.NET core app using Bootstrap CSS. Suggestions for improving spacing and text aesthetics would be appreciated. Thank you, Peter https://i.sstatic.net/HA5dZ.png Below is the code snipp ...

cssrazor

Guide on exporting a submodule within a TypeScript package

My aspiration is to develop a Typescript library that emulates the structure of popular libraries like RxJS and Angular Material, which are divided into submodules. RxJS and Angular exhibit a way to import features using syntax like this: // RxJS import ...

javascripttypescriptecmascript-6

Access the array values by their respective keys in an object that is returned from a custom JavaScript file utilizing the Node.js file system

I recently came across a config file with a unique format, as shown below: define([], function () { return { productItems: { item1: ['Apple', 'Ball', 'Car'], item2: [&apo ...

javascriptnode.jsarraystypescriptjavascript-objects

The ajax success error function does not trigger in jQuery

Hey, check out my code below: <html> <head> <script src="http://code.jquery.com/jquery-1.8.0.min.js"> </script> </head> <body> <form id="foo"> <label for="bar">A bar</label> <input id ...

javascriptajaxjquery

Synchronous execution of functions in Node.js

I need to ensure that func2 is only called after func1 has completed its execution. { func1(); func2();// } However, the issue arises when func1() starts running and func2() does not wait for it to finish. This leads to a runtime error as func2() require ...

javascriptnode.jsasync.js

Centered inline-block divisions

I've been coding for a number of years now, but I've recently started learning CSS. I'm currently facing an issue and need some help. I want to place two divs next to each other and center them. Here's the code I'm using: HTML: & ...

htmlcss