Skip to content

[4.x]: Live preview doesn't retain scroll position when using scroll-behavior: smooth #14218

@MoritzLost

Description

@MoritzLost

What happened?

Description

By default, the live preview retains/restores the current scroll position when a field it's refreshed. However, this doesn't work if you use scroll-behavior: smooth on the HTML element:

html {
    @media (prefers-reduced-motion: no-preference) {
        scroll-behavior: smooth;
    }
}

This happens without using iframe resizer (useIframeResizer is set to false). Using iframe resizer fixes this in some cases, but unfortunately breaks the preview in other ways.

Steps to reproduce

  1. Include the CSS above in a template.
  2. Open the live preview for any entry and scroll down.
  3. Edit any field so that the live preview refreshed. The live preview will reset to the start of the page.

Expected behavior

Scroll position should be retained/restored even when using scroll-behavior: smooth. If that is unfeasible, the live preview could inject some CSS to overwrite the scroll-behavior property for the html element, that should be an acceptable workaround.

Craft CMS version

4.5.7

PHP version

8.2

Operating system and version

No response

Database type and version

No response

Image driver and version

No response

Installed plugins and versions

No response

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions