Triggering scroll snapping in CSS based on a different user action than just scrolling

Take a look at this example: https://codesandbox.io/s/spring-wood-0bikbb?file=/src/styles.css

Try this to recreate the issue:

  • Click on the input at the top
  • Scroll to the bottom, then click on an empty area
  • Observe how the screen jumps back up to the top snap target

After investigating, I've found that these factors are contributing to the problem:

  • The scroll window being over an area without a nearby snap target
  • The width of the input changing when focused/unfocused

Here's what the demonstration does:

  • Adds/removes a class from the container element when the input is focused/unfocused
  • This class alters the width of the container
  • The input container is the only element with scroll-snap-align applied

Question: What is causing this screen jump and how can it be prevented?

css

Answer №1

It appears that you have encountered a bug related to chromium. While these bugs are becoming less common, they still pop up from time to time, especially in unique scenarios involving new features. In such cases, the only option is to find a workaround.

Below is a minimal example that reproduces the issue in Chrome but not in Safari or Firefox (macOS).

.main {
  scroll-snap-type: y proximity;
  height: 100vh;
  overflow-y: scroll;

  background: green;
}

.spacer {
  height: 200%;
}

input {
  width: 25%;
  scroll-snap-align: start;
}

input:focus {
  width: 50%;
}
<div class="main">
  <input type="text" />
  <div class="spacer"></div>
</div>

If you wish to contribute positively to the web community, consider checking the chromium bug tracker to see if the issue has already been reported and, if necessary, submit a report yourself https://bugs.chromium.org/p/chromium/issues/list

In terms of practical solutions to avoid this issue, until it is resolved, you may need to implement workarounds. Some potential strategies (not tested but likely effective) include:

  • Enabling scroll snapping conditionally
  • Forcing scroll position on input blur
  • Avoiding resizing the input
  • Adding a snap target below the input
  • Adapting your design or functional requirements

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 with the JavaScript DOM rewrite for aligning text?

function modifyTextAlignment(){ document.getElementById("th1").style.textAlign = "right"; } #th1{ text-align:left; } <table> <tr><center><th colspan="2" id="th1">List of Important Emergency Contacts</th><center></tr& ...

javascriptjqueryhtmlcss

What is the best way to maintain the height of a background image while cropping it horizontally and resizing the browser?

My code looks like this:- HTML <div id="header-main"></div> CSS #header-main { background: url(http://planetbounce.m360.co.uk/wp-content/themes/planetbounce/assets/img/planet-bg.jpg); background-position: center; background-size ...

htmlcss

When the forward button is pressed multiple times in the carousel, the alignment changes

I recently noticed that the alignment of my carousel gets disturbed when I repeatedly click the forward button (>). How can I ensure that the carousel moves smoothly one item at a time when I click the forward or backward buttons? <div class="contai ...

javascriptcsstwitter-bootstrapbootstrap-4

Concealing a form after submission using JavaScript

After submitting the form, I am attempting to hide it and display a loading GIF. I've experimented with various methods, including changing ClassName to Id, but haven't had success. This is for a school project, and I've spent a significant ...

javascriptphphtmljquerycss

Exclusive to Firefox: The left and right arrows will shift the entire page

I've encountered a strange issue with my website that only seems to be occurring in Firefox. When using the mouse scroll, I am able to move up and down as expected. However, when using the arrow keys, the entire page shifts to the right in approximate ...

htmlcssfirefoxweb

Why is this dropdown list extending beyond the window?

Why is my dropdown list extending beyond the window? Despite trying to change the position of the dropdown list elements to fixed and top:0px, I am still facing this issue! I am unable to figure out why the list is going off the page. Your help in solvin ...

jqueryhtmlcss

Arranging column contents neatly on small screens

Although there are similar answers available, I want to address those who are trying to prevent their columns from stacking on XS display. Despite having two columns, the content is still stacking at certain displays. This issue is occurring while using B ...

csstwitter-bootstrapbootstrap-4

What is the best way to ensure that the CSS padding for a button matches the width of the column consistently?

I have encountered an issue where I am unable to maintain consistent padding for a button relative to the column width. This is crucial for me because the button's background changes when a user hovers over it. However, using a fixed value for the but ...

htmlcsswebpadding

What is the best way to align two span tags to the right on separate lines?

I am facing an issue with the positioning of three span tags: A is floated left while B and C are floated right. My desired layout is to have C positioned below B, both floating right on separate lines. I attempted using display:block for B but it did not ...

csscss-floatblockhtml

When viewing the material-ui Chip component at normal zoom, a border outlines the element, but this border disappears when zoomed in or out, regardless of

Edit I have recently discovered a solution to the unusual problem I was facing with the material-ui Chip Component. By adding the line -webkit-appearance: none; to the root div for the Chip, the issue seems to resolve itself. However, this line is being a ...

javascriptcssreactjsmaterial-ui

Tips for decreasing Vuetify Grid column width on larger screens

I'm currently utilizing the vuetify grid system to construct a reply component. The column ratio is set at 1:11 for the icon and reply columns, respectively. Below you'll find the code snippet: <v-row justify="center" class="ma-0 pa-0"> ...

cssvue.jsvuejs2vuetify.jscss-grid

Changing the background image of the body when hovering over a li element: a step-by-step

For my website, I want to achieve the same effect as seen on the homepage of this site: I am looking to change the background image of my webpage when a specific li element is hovered over. Each li element should trigger a different background image. Add ...

javascriptjqueryhtmlcss

"Guide to triggering the display of a particular div based on its class when clicked

I have multiple div elements with the class name dis HTML: <div class="dis">Content</div> <div class="dis">Content</div> <div class="dis">Content</div> and so on ... Additionally, there are various images: <img sr ...

javascripthtmlcss

Stopping autoplay in Swiper as soon as you hover over it

My swiper is set to autoplay, but I want it to stop immediately when hovered over instead of waiting for the transition to finish. Is there a way to interrupt the transition and stop it at the exact point where the cursor hovers? Here is my Swiper config ...

javascriptcssvue.jsswiper.jsautoplay

Issue with jQuery incorrectly calculating height post-refresh

I am currently utilizing jQuery to vertically center various elements on a webpage. Due to lack of support in older versions of IE, I cannot use the table-cell CSS statement. Therefore, I am using jQuery to calculate half of the height and then position it ...

javascriptjqueryhtmlcssheight

Tips for designing a sleek and seamless floating button

I attempted to implement a floating button feature that remains in view while smoothly flowing using jQuery. I followed a tutorial I found online to create this for my website. The tutorial can be accessed at this link. However, after following all the ste ...

javascriptjqueryhtmlcss

What is the best way to apply CSS to a single div without affecting the rest of the code?

After importing the following stylesheet: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> I noticed that it was affecting other elements on my webpage, like buttons. Is there a way to instruct m ...

csstwitter-bootstrap

The CSS for the UI Grid is malfunctioning

I have been working on creating a grid using UI Grid (recent version of ngGrid) within my current project. However, I am facing some issues with the display. The icons like angle down and row selected icon are not showing up correctly when I include the CS ...

cssangularjstwitter-bootstrapng-gridangular-ui-grid

What is the best way to override @include within a CSS class?

Our team's application utilizes Bootstrap SASS for styling, but we have made certain customizations to the framework. The Bootstrap files are included in our project through a build process, making direct modifications impossible. When it comes to dr ...

csstwitter-bootstrapsass

Issues arising with the functionality of CSS media queries when used in conjunction with the

I created a webpage that is functioning well and responsive on its own. However, when I integrate the same files with the Spring framework, the responsiveness of the webpage seems to be lost. To ensure the responsiveness of the Spring webpage, I tested it ...

javahtmlcssspringjsp