-
Notifications
You must be signed in to change notification settings - Fork 3.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🖍🚀 Alternate position: fixed/absolute
when docking/undocking
#32243
🖍🚀 Alternate position: fixed/absolute
when docking/undocking
#32243
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thank you for including the before/after videos!
|
||
// If the component's box is way out of view, the runtime might have | ||
// discarded its size values. | ||
if (!isSizedRect(inlineRect)) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
FYI, you can now use ResizeObserver
. Dima created a really nice helper
amphtml/src/utils/size-observer.js
Lines 32 to 36 in 8887dff
/** | |
* @param {!Element} element | |
* @param {!ContentSizeObserverCallbackDef} callback | |
*/ | |
export function observeContentSize(element, callback) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, I'll give that a try later. We might not need this check after all now since all rects come directly from browser.
…ineRect for consistency
…oject#32243) - 🖍 Previously the video element would lag behind when using `position: fixed` at undock. `position: absolute` follows the video as it scrolls, eliminating the lag. (This was backported from Bento version.) - 🚀 Use existing `clientRect` where possible to prevent `getBoundingClientRect()` calls. - 🚀 Migrates to `IntersectionObserver`. Before / after (at 0.75 speed) https://user-images.githubusercontent.com/254946/106031359-0756a300-6084-11eb-8bab-7cbe1f769313.mp4
* 'master' of github.com:ampproject/amphtml: (1020 commits) 🏗 Clean up CI config files (ampproject#32303) 🏗 Remove Browser Installation from CI tasks and use smaller instances when possible (ampproject#32310) Cleanup fie-resources experiment (ampproject#32226) 🏗 Fix bug in build target discovery logic (ampproject#32307) 📖 Update TOC on TESTING.md (ampproject#32304) 🏗 Reorganize browserify caching code (ampproject#32297) Fix <textarea> scrollHeight calculation (ampproject#32292) 📖 Update testing docs (ampproject#32298) Fix missing space and mention `https` (ampproject#32293) ✨ [Story auto-analytics] Added validation and tests (ampproject#32288) 🏗 Consolidate remaining CircleCI VM setup steps into separate scripts (ampproject#32290) 🏗 Cache Karma's babel transforms during CircleCI builds (ampproject#32295) Add validation rules for aspect-ratio support via SSR (ampproject#32262) bump up viewer-messaging version (ampproject#32286) 🖍🚀 Alternate `position: fixed/absolute` when docking/undocking (ampproject#32243) ✨ [Panning media] Transition siblings by ID (ampproject#32217) 📦 Update dependency watchify to v4 (ampproject#32284) 📦 Update dependency rollup to v2.38.1 (ampproject#32274) 🐛♻️ ADS: XHRs race condtion and responsivnes fix (ampproject#32271) Add support for gdpr_conseented_providers, useCCPA_USPAPI, and _fw_us_privacy (ampproject#32275) ...
🖍 Previously the video element would lag behind when using
position: fixed
at undock.position: absolute
follows the video as it scrolls, eliminating the lag. (This was backported from Bento version.)🚀 Use existing
clientRect
where possible to preventgetBoundingClientRect()
calls.🚀 Migrates to
IntersectionObserver
.Before / after (at 0.75 speed)
dock-fixed-absolute.mp4
(Tip: right click >
Loop
)