diff --git a/src/components/MainLayout/index.tsx b/src/components/MainLayout/index.tsx index 0e7eb5456ad..7d3d3694596 100644 --- a/src/components/MainLayout/index.tsx +++ b/src/components/MainLayout/index.tsx @@ -46,7 +46,9 @@ const MainLayout: LayoutComponent = ({ <> - {children} +
+ {children} +
) diff --git a/src/components/Page/utils.ts b/src/components/Page/utils.ts index 41295459b30..a98d22a9244 100644 --- a/src/components/Page/utils.ts +++ b/src/components/Page/utils.ts @@ -15,10 +15,13 @@ export const useAnchorNavigation = () => { const node = document.querySelector(location.hash) if (node) { - scrollIntoLayout(node) - allImagesLoadedInContainer(document.body).then(() => - scrollIntoLayout(node) - ) + const contentRoot = document.getElementById('layoutContent') + + if (contentRoot) { + allImagesLoadedInContainer(contentRoot).then(() => + scrollIntoLayout(node) + ) + } } } else { document.documentElement.scrollTop = 0 diff --git a/src/utils/front/images.ts b/src/utils/front/images.ts index 14a55077b51..82842ceecfa 100644 --- a/src/utils/front/images.ts +++ b/src/utils/front/images.ts @@ -1,7 +1,7 @@ import Promise from 'promise-polyfill' export const getImages = (node: Element) => - Array.from(node.querySelectorAll('img')) + Array.from(node.querySelectorAll('img')).filter((imgNode) => !!imgNode.src) export const imageLoaded = (imgNode: HTMLImageElement) => { if (imgNode.complete && imgNode.naturalWidth !== 0) { diff --git a/src/utils/front/scroll.ts b/src/utils/front/scroll.ts index 70479fa5d4c..689d13d578c 100644 --- a/src/utils/front/scroll.ts +++ b/src/utils/front/scroll.ts @@ -47,10 +47,10 @@ export const scrollIntoLayout = ( const nodeOffset = node.getBoundingClientRect() const position = htmlNode.scrollTop + nodeOffset.top + (opts?.offset || 0) const headerHeight = getHeaderHeightAt(position) - const scrollTo = position - headerHeight + const scrollTo = Math.floor(position - headerHeight) if (!opts?.smooth) { - htmlNode.scrollTop = scrollTo + requestAnimationFrame(() => (htmlNode.scrollTop = scrollTo)) return }