overflow-overlay.yml

title: "Firefox doesn't support the non-standard `overflow: overlay` setting"
severity: low
tags:
  - css

symptoms:
  - Some sites have text that overflows their boxes in Firefox where the overflow is hidden behind a scrollbar in Webkit and Chrome.

solutions:
  notes:
    - Firefox should treat overflow:overlay as an alias for overflow:auto, but we'd need a special tweak to make scrollbars overlay.
  workarounds:
    - "Web Developers can try `overflow-y: auto; overflow-x: hidden` with `width: 100vh` rather than `overflow: overlay`."

references:
  breakage:
    - url: https://webcompat.com/issues/24462
      site: https://www.redbubble.com/shop/firefox?ref=search_box
      platform:
        - desktop
      resolution: site_fixed
      impact: feature_broken
      affects_users: all
      last_reproduced: 2019-01-23

    - url: https://webcompat.com/issues/50378
      site: https://bing.com/covid
      platform:
        - desktop
      resolution: site_fixed
      impact: site_broken
      affects_users: all
      last_reproduced: 2020-03-20

    - url: https://webcompat.com/issues/57676
      site: https://www.mediamarkt.nl/nl/category/_tablets-645048.html#filter-container
      platform:
        - mobile
      impact: feature_broken
      affects_users: all
      last_reproduced: 2020-09-07

    - url: https://webcompat.com/issues/21212
      site: https://www.redbubble.com/shop/design+mens-sweatshirts?cat_context=men-clothes&ref=shop_medium_refinement
      platform:
        - desktop
      resolution: site_fixed
      impact: feature_broken
      affects_users: all
      last_reproduced: 2018-11-12

    - url: https://webcompat.com/issues/57504
      site: https://www.talentigelato.com/findtalenti
      platform:
        - desktop
      resolution: site_fixed
      impact: feature_broken
      affects_users: some
      last_reproduced: 2020-09-08

    - url: https://webcompat.com/issues/62572
      site: https://artusi.com.au/retailers/
      platform:
        - desktop
      impact: significant_visual
      affects_users: some
      last_reproduced: 2022-07-28

    - url: https://webcompat.com/issues/64199
      site: https://docs.amplify.aws/cli/graphql-transformer/overview#api-category-project-structure
      platform:
        - desktop
      resolution: site_fixed
      impact: significant_visual
      affects_users: all
      last_reproduced: 2020-12-28

    - url: https://webcompat.com/issues/73463
      site: https://www.tiktok.com/@sabrinacarpenter
      platform:
        - desktop
      intervention: https://github.com/mozilla-extensions/webcompat-addon/blob/c6149e852762ab4704f1566070c52594f2364da2/src/injections/css/bug1710701-tiktok.com-comments-scrollbar.css
      resolution: site_fixed
      impact: feature_broken
      affects_users: all
      last_reproduced: 2021-05-11

    - url: https://webcompat.com/issues/105417
      site: https://nutmeg.morrisons.com/
      platform:
        - mobile
      intervention: https://github.com/mozilla-extensions/webcompat-addon/blob/f0d4169daf26d66336e80ac5d1276e5150b72043/src/injections/css/bug1784195-nutmeg.morrisons.com-overflow.css
      impact: feature_broken
      affects_users: all
      last_reproduced: 2022-08-23

    - url: https://webcompat.com/issues/108729
      site: https://www.movistar.com.ar/productos-y-servicios/television/grilla-canales-tv
      platform:
        - desktop
      intervention: https://github.com/mozilla-extensions/webcompat-addon/blob/f0d4169daf26d66336e80ac5d1276e5150b72043/src/injections/css/bug1784351-movistar.com.ar-overflow-overlay-fix.css
      impact: feature_broken
      affects_users: some
      last_reproduced: 2022-08-23

  platform_issues:
    - https://bugzilla.mozilla.org/show_bug.cgi?id=1521631
    - https://bugs.chromium.org/p/chromium/issues/detail?id=649496
    - https://bugs.chromium.org/p/chromium/issues/detail?id=710214
    - https://bugs.webkit.org/show_bug.cgi?id=189811
  testcases:
    - https://bug1521631.bmoattachments.org/attachment.cgi?id=9281215