Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[4.x]: Live preview doesn't maintain scrollX on refresh #12504

Closed
realjoshharrison opened this issue Jan 5, 2023 · 5 comments
Closed

[4.x]: Live preview doesn't maintain scrollX on refresh #12504

realjoshharrison opened this issue Jan 5, 2023 · 5 comments
Assignees
@brianjhanson
Labels
bug craft4

Comments

@realjoshharrison
Copy link

realjoshharrison commented Jan 5, 2023 •
edited

What happened?

Description

When using live preview on a page which can scroll horizontally, the page's scrollX is always 0 when live preview refreshes. scrollY is maintained as expected.

Steps to reproduce

  1. Set up horizontally scrolling template (minimal example code below) on an entry type which has any field on it (in order to trigger live preview refresh)
  2. Edit the entry and enter live preview
  3. Scroll to e.g. box 24 at the bottom right
  4. Edit a field and observe how when live preview refreshes, scrollY is maintained at the bottom of the page, but scrollX has reset to 0.

Expected behavior

scrollX is maintained as well as scrollY.

Actual behavior

scrollX is ignored, scrollY is maintained.

Example template code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Craft Test</title>
    <style>
      html {
        overflow-x: auto;
        font: 20px/1.2 sans-serif;
      }
      .boxes {
        display: flex;
        flex-wrap: wrap;
        width: 4000px;
      }
      .box {
        width: 500px;
        height: 75vh;
        background: #eee;
        border: 5px solid #fff;
        padding: 20px;
        flex-shrink: 0;
        box-sizing: border-box;
      }
    </style>
</head>
<body>

  <div class="boxes">
    {% for i in 1..24 %}
      <div class="box">Box {{ i }}</div>
    {% endfor %}
  </div>

</body>
</html>

Browser

Google Chrome 108.0.5359.124 (Official Build) (arm64)
Reproducible with all extensions disabled
MacOS Ventura 13.0.1

Craft CMS version

4.3.6

PHP version

8.0.8

Operating system and version

MAMP Pro, Darwin 22.1.0

Database type and version

MySQL 5.7.34

Image driver and version

ImageMagick 6.9.6-2

Installed plugins and versions

  • None
@brianjhanson brianjhanson self-assigned this Jan 5, 2023
brianjhanson added a commit that referenced this issue Jan 5, 2023
@brianjhanson
Restore ScrollX position when updating iframe
6e9ae50 
Fixes #12504
@brianjhanson brianjhanson mentioned this issue Jan 5, 2023
Closed
@brianjhanson
Copy link
Contributor

👏 Thank you for the detailed reproduction steps! They were incredibly helpful. I've opened a PR to fix this up.

@realjoshharrison
Copy link
Author

Thanks for looking at this so quickly @brianjhanson! Is there any way I can get your fix before it ships? My client is currently loading a lot of content on a horizontally scrolling website 👀

E.g. if I just temporarily replace cms/src/web/assets/cp/dist/cp.js with your new version, would it cause issues next time I update?

@brianjhanson
Copy link
Contributor

You can get the fix early by changing your craftcms/cms requirement in composer.json to "dev-bugfix/cms-12504-reset-scroll-x as 4.3.6" and running composer update.

I'd recommend getting that back to a standard constraint as soon as possible, but it should get you by until the fix is released.

brandonkelly added a commit that referenced this issue Jan 27, 2023
@brandonkelly
Release note for #12504
490f598
brandonkelly added a commit that referenced this issue Jan 27, 2023
@brandonkelly
Merge branch 'v3' of https://github.com/craftcms/cms into develop
1afdbbd 
# Conflicts:
#	CHANGELOG.md
#	src/web/assets/cp/dist/cp.js
#	src/web/assets/cp/dist/cp.js.map

Resolves #12505
Fixes #12504
@brandonkelly
Copy link
Member

That fix is now pulled in for the next Craft 3 and 4 releases.

@realjoshharrison If you were pulling in the PR branch, you can change your craftcms/cms requirement to dev-develop as 4.3.6.1.

@realjoshharrison realjoshharrison mentioned this issue Jan 30, 2023
Closed
@brandonkelly
Copy link
Member

Craft 3.7.64 and 4.3.7 have been released with that fix.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@brianjhanson brianjhanson

Labels
bug craft4
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Restore ScrollX position when updating iframe craftcms/cms
3 participants
@brandonkelly @brianjhanson @realjoshharrison