search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.86k stars 1.82k forks source link

Cannot scroll to view absolutely positioned div inside an ExpandableTile - Safari only #8119

Closed MarcelPoirier closed 3 years ago

MarcelPoirier commented 3 years ago

What package(s) are you using?

Detailed description

In Cognos, we have a few cases where we show a calendar control inside an ExpandableTile. When the user clicks on the control and the calendar displays they cannot scroll to view the entire calendar - this only happens in Safari, in other browsers the user can scroll without any issues. I was also able to reproduce the issue with a simple absolutely positioned div taking the calendar control out of the equation.

I tried using the latest carbon-components-react and can still reproduce the issue.

Steps to reproduce the issue

Use a ExpandableTile that has a control (button) that shows / hides an absolutely div that is higher than the Tile container. When the div is shown, try scrolling down to see the entire div. In Safari, you cannot scroll.

I've created a reproducible test case in codesandbox showing the issue with the Calendar and also a simple div. https://codesandbox.io/s/tilebelowthefoldcontent-r578b?file=/src/index.js:700-714

tw15egan commented 3 years ago

Seems like adding .bx--tile--is-expanded .bx--tile-content__below-the-fold { overflow-y: auto; } resolves the issue