Google Chrome viewport-anchored expand direction with flexbox

by

Add this code to your flex container:

  • overflow-anchor: none

This will disable a feature in Chrome known as “scroll anchoring”, which is causing the upward expansion of boxes (revised codepen).

In Chrome, the upward / downward direction of expanding boxes is governed by the scroll position in the viewport, not the layout itself.

Chrome takes a unique approach to this behavior for the purpose of improving the user experience.

Basically, they bind a DOM element to the current scroll position. The movement of this particular (“anchor”) element on the screen will determine an adjustment, if any, to the scroll position.

They call this approach “Scroll Anchoring”. The algorithm is explained on this page:
https://github.com/WICG/ScrollAnchoring/blob/master/explainer.md

This behavior is currently unique to Chrome, but Google is pushing for standardization.

In accordance with the Scroll Anchoring documentation, applying overflow-anchor: none to the appropriate element(s) will disable scroll anchoring adjustments.

More information:

More Related Contents:

  1. CSS Trouble adding border
  2. How to get header from cards or similar to have the same height with flex box?
  3. How do I auto-hide placeholder text upon focus using css or jquery?
  4. Custom CSS to allow chrome textarea resize smaller than initial state?
  5. jQuery Adding new option to select element doesn't pick up the string [closed]
  6. Slide down button to show text HTML CSS
  7. How can I use jQuery in Greasemonkey scripts in Google Chrome?
  8. Bootstrap 3 Collapse show state with Chevron icon
  9. css width: calc(100% -100px); alternative using jquery
  10. Use jQuery/CSS to find the tallest of all elements [duplicate]
  11. Set width of a “Position: fixed” div relative to parent div
  12. How to make a hover effect for pseudo elements?
  13. What CSS3 selectors does jQuery really support, e.g. :nth-last-child()?
  14. How do you stop Chrome and Opera sorting JSON objects by Index ASC?
  15. Exporting PDF with jspdf not rendering CSS
  16. How to take id as selector when used hash?
  17. Get height of div with no height set in css
  18. auto resize text (font size) when resizing window?
  19. Distinguish Chrome from Safari using jQuery.browser
  20. Mobile site – force landscape only / no auto-rotate
  21. Check, using jQuery, if an element is ‘display:none’ or block on click
  22. How can I tell if a particular CSS property is inherited with jQuery?
  23. Can an iframe only show a certain part of the page?
  24. How to force a hover state with jQuery?
  25. CSS issue on Twitter Typeahead with Bootstrap 3
  26. How to keep footer at the bottom even with dynamic height website
  27. JQuery search in static HTML page with highlighting of found word
  28. The .fadeOut() method to use visibility property instead of display property
  29. Bootstrap Carousel showing next and previous image
  30. Possible to have a floating horizontal scrollbar?

Leave a Comment