fix(header): collapsible header works in tabs#19658
Conversation
| * border as the top-most toolbar collapses or expands. | ||
| */ | ||
| const toolbarIntersection = (ev: any) => { handleToolbarIntersection(ev, mainHeaderIndex, scrollHeaderIndex); }; | ||
| this.intersectionObserver = new IntersectionObserver(toolbarIntersection, { threshold: [0.25, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1], rootMargin: `-${mainHeaderHeight}px 0px 0px 0px` }); |
There was a problem hiding this comment.
The IntersectionObserver API is available as of iOS 12.2, will there be a fallback for earlier versions of iOS?
There was a problem hiding this comment.
Probably not - The polyfill for this is not great. I'll add some feature detection to disable it so users don't get errors. If unsupported, would you be fine with collapse="condense" on the header and collapse="true" on buttons being ignored?
There was a problem hiding this comment.
OK I see, I have to check how the look and feel is on a device where its disabled but my first thought would be to hide the collapsable - big - header entirely on devices that do not support it and just to display the small header.
There was a problem hiding this comment.
So I tried the current behaviour on an iOS 11 device, currently only the large title in the collapsible header is visible and simply scrolls out of view, but because of the missing IntersectionObserver API (which throws an error currently) the small title is never displayed. I think this is acceptable but having it the other way round (i.e. small title in header is always visible, large title never shows) would be nicer as it was the default until iOS 13 anyway.
And its now working inside tabs too!
There was a problem hiding this comment.
Ok cool. I'll do the feature detection in a separate PR so we can get this bug fix out. 👍
Pull request checklist
Please check if your PR fulfills the following requirements:
npm run build) was run locally and any changes were pushednpm run lint) has passed locally and any fixes were made for failuresPull request type
Please check the type of change your PR introduces:
What is the current behavior?
Issue Number: #19640
What is the new behavior?
Does this introduce a breaking change?
Other information