RTL: Frame and display layer not in sync when zoomed

[miina]

Bug Description

The selection frame and the displayed element are not in sync. This can be seen especially well when setting the zoom level to 200%, however, some styling oddities can be noticed in the default zoom level, too.

Edit:
Additionally, horizontal scrolling while in Zoom only moves the frame layer but not the display layer.

Expected Behaviour

The display and frame layer should be in sync and look as expected in RTL mode.

Steps to Reproduce

1. Set the mode to RTL
2. Add an element, select it
3. Set the zoom level to 200%
4. See the display and frame difference
5. Resize the window so that horizontal scrollbar would appear, too.
6. Scroll horizontally -- see the frame moving but not the display.

Screenshots

Out of sync frame / display

Incorrect selection styling (a bit shifted):

Additional Context

From Morten:

Looks like the padding for the lack of scrollbar is added to the wrong side of the container in the display layer - the display layer does not have a scrollbar, but most still reserve the space to align the elmeents correctly with the frames layer.

• Plugin Version:
• WordPress Version:
• Operating System:
• Browser:

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance Criteria

Implementation Brief

[miina]

Edit: Expanding the scope of this issue since apparently there are more issues related to Zoom + layers.

• Only Chrome has the original issue, Safari and Firefox work as expected, so the fix for the out of sync Moveable due to scrollbar should be for Chrome only.
• Additionally, horizontal scrolling does not work as expected anywhere when zoomed in.

[miina]

@bmattb FYI it came out there were more issues with Zoom than originally thought, and I raised the points for this issue.