{"id":16831139,"url":"https://github.com/chearon/scrollbugs","last_synced_at":"2026-01-04T12:03:06.121Z","repository":{"id":142611310,"uuid":"151895636","full_name":"chearon/scrollbugs","owner":"chearon","description":"List of known browser bugs/inconsistencies involving CSS layouts with scrollbars","archived":false,"fork":false,"pushed_at":"2020-01-15T21:20:39.000Z","size":12,"stargazers_count":8,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-17T19:52:14.322Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chearon.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-10-07T01:20:47.000Z","updated_at":"2023-11-16T21:00:58.000Z","dependencies_parsed_at":null,"dependency_job_id":"f9381cad-b6fc-4930-97d5-719bd8472c82","html_url":"https://github.com/chearon/scrollbugs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chearon%2Fscrollbugs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chearon%2Fscrollbugs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chearon%2Fscrollbugs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chearon%2Fscrollbugs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chearon","download_url":"https://codeload.github.com/chearon/scrollbugs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244135905,"owners_count":20403797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-13T11:42:23.638Z","updated_at":"2026-01-04T12:03:06.074Z","avatar_url":"https://github.com/chearon.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"Scrollbugs\n==========\n\nWeb browsers exhibit some inconsistencies when it comes to handling scrolled content. This is an attempt to categorize and explain them, and provide work-arounds and layout tests.\n\n1. [Scrolling block (flow) elements and grid elements](#layout-bug-1)\n2. [Scrolling flexboxes](#layout-bug-2)\n3. [Scrolling in a shrinkwrapped (`minmax(0, 1fr)` with `max-height`) grid](#behavior-bug-1)\n4. [Shifting down visible content in a scroll area](#behavior-bug-2)\n5. [Scrolling grid flex item](#behavior-bug-3)\n\n## Layout bugs\n\nThe following situation is where the layout differences below happen:\n* Scrollbars have size (Windows-style or when traditional scrollbars are enabled on macOS)\n* `overflow: auto`\n* Vertical overflow that creates a vertical scrollbar\n* No constraint (`max-width` etc) in the horizontal direction\n\nNote that browsers are _consistent_ in the following:\n* `overflow: scroll` always adds scrollbars to the size of the element\n* Horizontal scrollbars are always added to the size of the element\n\nFirefox, Edge, and Safari ([for the most part](#layout-bug-2)) shrink the element's inner width to fit the scrollbar and avoid forcing a relayout on the parent element. Chrome adds the scrollbar to the element's total width and does not shrink content, unless its outer size constraints are reached.\n\n### Layout bug #1\n\n_Chrome adds the vertical scrollbar to the total size of the block element, other browsers don't._\n\n#### Examples\n\n* [Scrolling block as an inline-block](http://jsfiddle.net/d3jptx5b/)\n* [Scrolling block as a grid item](http://jsfiddle.net/e47g1fd9/)\n* [Scrolling block as a flex item](http://jsfiddle.net/dunr72ye/)\n* [Scrolling grid](http://jsfiddle.net/rmyjfaq4/)\n\n#### Work-arounds\n\n* Set a fixed width on the scrolling element or some parent element to make everything layout with definite size\n* Detect the shrink-width behavior and if it exists, add the [scrollbar size](https://jsfiddle.net/quLjdn0p/)\n\n### Layout bug #2\n\n_Safari and Chrome add the scrollbar to a flexbox's size. Safari initially subtracts the scrollbar until its inner content is laid out again (for example, by toggling `flex`)._\n\n#### Example\n\n* [Scrolling flexbox](http://jsfiddle.net/2n7uf8g9/)\n\n#### Work-arounds\n\nThe best way is to just avoid this layout - if you need to scroll a flexbox, try wrapping it with something else that scrolls, like another flexbox and scroll the flex item.\n\n## Behavior bugs\n\nThese bugs happen while the user is scrolling.\n\n### Behavior bug #1\n\n_In a \"shrinkwrap\" grid layout, Safari and Chrome discard the scroll position if content triggers a relayout while the user is dragging the scrollbar ([bug](https://bugs.chromium.org/p/chromium/issues/detail?id=878571))_\n\nUsing `minmax(0, 1fr)` along with `max-height` and `max-width` gives you a [magical layout](https://www.w3.org/TR/css-grid-1/#algo-flex-tracks). You can make a container that grows as its content does and gets no larger, and also shrinks/scrolls when it hits a specified limit. Safari and Chrome have just one issue with this layout when using the mouse to drag the scrollbar.\n\n#### Examples\n\n* [Dragging a shrinkwraped grid's scrollbar](https://jsfiddle.net/xkza85dp/) Chrome stops scrolling, Safari stops and resets scroll to top\n* [Focusing an input inside the shrinkwrapped grid](https://jsfiddle.net/9z2oxsbd/) Safari resets scroll to top\n\n#### Work-arounds\n\nDetect if the width/height of the content has hit the constraint and if so, change `max-width/max-height` to `width/height`\n\n### Behavior bug #2\n\n_Chrome attempts to keep visible content in a scrolling viewport if it would be shifted down by relative positioning changes (div added before content, or height of a div before the content is changed)_\n\nChrome probably added this feature to help with badly coded webpages that have ads which change size or load while the user is reading. Unfortunately this behavior can be a nightmare if you're implementing virtual scrolling or something similar.\n\n#### Example\n\n* [Shifting down content in a scrolling element](https://jsfiddle.net/kdwp7mzb/)\n\n#### Work-arounds\n\n* Use `overflow-anchor: none`. This is the best/fastest solution.\n* Replace the visible elements in the viewport with new ones when you update the content (e.g. use `:key` in Vue)\n\n### Behavior bug #3\n\n_A grid as a flex item that is also a scroll root can sometimes change size in Chrome_\n\nIf appended with JS, the layout will be wrong on the first pass, but when the user interacts in a way that causes layout inside the flex item (like appending a grid item) it will self-correct.\n\nChrome bug: [1042399](https://bugs.chromium.org/p/chromium/issues/detail?id=1042399)\n\n#### Example\n\n* [Grid with intrinsic tracks that contain flexbox with a scrolling grid](https://jsfiddle.net/fqnryp63/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchearon%2Fscrollbugs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchearon%2Fscrollbugs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchearon%2Fscrollbugs/lists"}