Fix: Prevent vertical shifting of #content on the Watch page when displaying the stream status overlay. on Watch page#4721
Conversation
…ng the stream status overlay. (watch.php) If Scale=auto is enabled and the page is scrolled down slightly, then when the stream is stopped and then restarted, the page (#content) shifts slightly vertically. I couldn't figure out why this happens, despite extensively studying the page layout. Adding a DIV will avoid this issue. It's probably a hack, but it works.
IgorA100
changed the title
There was a problem hiding this comment.
Pull request overview
This PR aims to stop a small vertical layout “jump” on the classic skin Watch page when the stream status overlay appears/disappears (notably with Scale=auto and slight scroll).
Changes:
- Insert a small spacer
<div>before the monitor wrapper to prevent the observed shifting.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
web/skins/classic/views/watch.php
Outdated
| ?> | ||
| </ul> | ||
| </nav> | ||
| <div style="padding-right:1px; margin-right: -1px;"></div> <--! REQUIRED https://github.com/ZoneMinder/zoneminder/pull/4721 --> |
There was a problem hiding this comment.
This introduces an anonymous empty spacer <div> with inline styles and magic numbers (1px / -1px), which is hard to understand and maintain. Consider giving it an id/class (and aria-hidden="true") and moving the styling into the skin CSS with a short explanation of what layout shift it prevents.
| <div style="padding-right:1px; margin-right: -1px;"></div> <--! REQUIRED https://github.com/ZoneMinder/zoneminder/pull/4721 --> | |
| <style> | |
| /* Spacer prevents a 1px horizontal layout shift between the nav sidebar | |
| * and the monitor wrapper when scrollbars appear/disappear in some browsers. | |
| * See https://github.com/ZoneMinder/zoneminder/pull/4721 | |
| */ | |
| .monitor-layout-spacer { | |
| padding-right: 1px; | |
| margin-right: -1px; | |
| } | |
| </style> | |
| <div class="monitor-layout-spacer" aria-hidden="true"></div> |
There was a problem hiding this comment.
@connortechnology
I'm not sure Copilot's comment is necessary; it would add a lot of unnecessary code.
Isaac, the final word is yours.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
|
I'd really prefer to know why and not need this hack. |
I'd also like to know; it's some kind of mystery; it shouldn't be like this. But I spent a couple of days researching the problem and haven't been able to solve it any other way yet. Right now, I have very little free time to study this particular issue. |
|
@connortechnology |
If
Scale=autois enabled and the page is scrolled down slightly, then when the stream is stopped and then restarted, the page (#content) shifts slightly vertically.I couldn't figure out why this happens, despite extensively studying the page layout.
Adding a DIV will avoid this issue.
It's probably a hack, but it works.