Fix dragged row offset from cursor in Chrome for contest/testcase reordering#671
Open
leduythuccs wants to merge 1 commit into
Open
Fix dragged row offset from cursor in Chrome for contest/testcase reordering#671leduythuccs wants to merge 1 commit into
leduythuccs wants to merge 1 commit into
Conversation
…rdering Dragging a row to reorder problems (contest edit) or test cases (problem data edit) showed the dragged row offset from the cursor in Chrome, growing worse the further down the page the table sat. Firefox and Safari were unaffected. Root cause: jQuery UI Sortable's default helper positions the dragged <tr> with `position: absolute` and computes its top/left relative to its offsetParent. Two things throw that off in this codebase: - body/html have `position: relative` (needed for the sticky footer), which Chrome and Firefox resolve differently as the offsetParent for table-row elements. - `.table` sets `backdrop-filter` (table.scss), which per spec makes the table itself a CSS containing block for absolute/fixed descendants, trapping the helper's positioning inside the table's own box instead of the viewport. Fix: in the sortable `start` handler, suspend `backdrop-filter` on the table for the duration of the drag, then switch the helper to `position: fixed` and drive it with raw viewport coordinates (event.clientX/clientY) on every `sort` tick, instead of relying on jQuery UI's offsetParent-relative math. The rect is read before switching position (and fixed/top/left are set atomically) so the helper doesn't briefly jump when jQuery UI's old absolute-relative top/left gets reinterpreted under fixed semantics.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Dragging a row to reorder problems (contest edit) or test cases
(problem data edit) showed the dragged row offset from the cursor in
Chrome, growing worse the further down the page the table sat. Firefox
and Safari were unaffected.
Root cause: jQuery UI Sortable's default helper positions the dragged
with `position: absolute` and computes its top/left relative to its offsetParent. Two things throw that off in this codebase:position: relative(needed for the sticky footer),which Chrome and Firefox resolve differently as the offsetParent for
table-row elements.
.tablesetsbackdrop-filter(table.scss), which per spec makesthe table itself a CSS containing block for absolute/fixed
descendants, trapping the helper's positioning inside the table's
own box instead of the viewport.
Fix: in the sortable
starthandler, suspendbackdrop-filteron thetable for the duration of the drag, then switch the helper to
position: fixedand drive it with raw viewport coordinates(event.clientX/clientY) on every
sorttick, instead of relying onjQuery UI's offsetParent-relative math. The rect is read before
switching position (and fixed/top/left are set atomically) so the
helper doesn't briefly jump when jQuery UI's old absolute-relative
top/left gets reinterpreted under fixed semantics.