@@ -173,6 +173,10 @@ Overflow.propTypes = {
173173 tolerance : PropTypes . oneOfType ( [ PropTypes . number , PropTypes . string ] )
174174} ;
175175
176+ // For Firefox, update on a threshold of 0 in addition to any intersection at
177+ // all (represented by a tiny tiny threshold).
178+ const threshold = [ 0 , 1e-12 ] ;
179+ 176180/**
177181 * Wrapper for content to render inside the scrollable viewport. This element
178182 * will grow to whatever size it needs to hold its content, and will cause the
@@ -198,19 +202,23 @@ function OverflowContent({ children, style: styleProp, ...rest }) {
198202 const root = viewportRef . current ;
199203
200204 const createObserver = ( direction , rootMargin ) => {
201- const threshold = 1e-12 ;
202- 203205 return new IntersectionObserver (
204206 ( [ entry ] ) => {
205207 if ( ignore ) {
206208 return ;
207209 }
208210
209- const canScroll =
211+ const hasSize = Boolean (
210212 entry . boundingClientRect . width || entry . boundingClientRect . height
211- ? entry . isIntersecting
212- : false ;
213- 213+ ) ;
214+ const canScroll =
215+ hasSize &&
216+ // Interestingly, Firefox can return an entry with an
217+ // `intersectionRatio` of 0 but `isIntersecting` of false.
218+ // This doesn't really make any sense. But check both just in
219+ // case.
220+ entry . intersectionRatio !== 0 &&
221+ entry . isIntersecting ;
214222 dispatch ( { type : 'CHANGE' , direction, canScroll } ) ;
215223 } ,
216224 {
0 commit comments