Merge pull request #9890 from overleaf/td-grammarly-firefox-layout-shift

Fixed position document element to work around Grammarly-related layout shifts in Firefox

GitOrigin-RevId: 1a69c5d753fbb85f28be50d042e370dd3811278e
This commit is contained in:
Alexandre Bourdin 2022-10-12 16:19:18 +02:00 committed by Copybot
parent 20d00c8db9
commit 2d6e6328a6
3 changed files with 9 additions and 0 deletions

View file

@ -1236,6 +1236,7 @@ const ProjectController = {
detachRole, detachRole,
metadata: { viewport: false }, metadata: { viewport: false },
showUpgradePrompt, showUpgradePrompt,
fixedSizeDocument: true,
}) })
timer.done() timer.done()
} }

View file

@ -1,6 +1,7 @@
doctype html doctype html
html( html(
lang=(currentLngCode || 'en') lang=(currentLngCode || 'en')
class=(fixedSizeDocument ? 'fixed-size-document' : undefined)
) )
- metadata = metadata || {} - metadata = metadata || {}

View file

@ -23,6 +23,13 @@ html {
height: 100%; height: 100%;
} }
// Prevent potential for layout shifts on a page with fixed 100% height. This
// can happen, for example, with the Grammarly extension in Firefox.
html.fixed-size-document {
position: fixed;
width: 100%;
}
body { body {
font-family: @font-family-base; font-family: @font-family-base;
font-size: @font-size-base; font-size: @font-size-base;