Skip to content

Avoid forced layout during dragging#5

Open
developit wants to merge 1 commit intomasterfrom
avoid-forced-layout-during-dragging
Open

Avoid forced layout during dragging#5
developit wants to merge 1 commit intomasterfrom
avoid-forced-layout-during-dragging

Conversation

@developit
Copy link
Copy Markdown
Contributor

This fixes a performance issue when <two-up> is used as a split view, where dragging triggers ResizeObserver which causes _resetPosition() to be invoked that in turn called getBoundingClientRect().

Here's the CSS I'm using to turn <two-up> into a split view:

body two-up {
	display: flex !important;
	grid: none !important;

	> * {
		grid-area: none !important;
	}

	> :first-child {
		box-sizing: border-box;
		clip-path: none !important;
		order: 1;
	}

	> :nth-child(2) {
		box-sizing: border-box;
		clip-path: none !important;
		order: 3;
	}

	> :last-child {
		position: absolute;
		order: 2;
		z-index: 2;
	}

	&:not([orientation="vertical"]) {
		> *:first-child {
			width: var(--split-point, 50%);
			min-width: var(--split-point, 50%);
			max-width: var(--split-point, 50%);
		}
		> *:last-child {
			height: 100%;
		}
	}

	&[orientation="vertical"] {
		flex-direction: column;
		> *:first-child {
			box-sizing: border-box;
			clip-path: none !important;
			height: var(--split-point, 50%);
			min-height: var(--split-point, 50%);
			max-height: var(--split-point, 50%);
			order: 1;
		}
		> *:last-child {
			width: 100%;
		}
	}
}

Fixes performance when `<two-up>` is used as a split view.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant