Skip to content

Fix for 270527: Using Translate property for scroll instead of top/left #274580

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix for 270527: Using Translate property for scroll instead of top/left #274580

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/vs/editor/browser/controller/editContext/native/screenReaderSupport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -166,8 +166,8 @@ export class ScreenReaderSupport extends Disposable {
// For correct alignment of the screen reader content, we need to apply the correct font
applyFontInfo(this._domNode, this._fontInfo);

this._domNode.setTop(top);
this._domNode.setLeft(left);
this._domNode.domNode.style.transform = `translate3d(${left}px, ${top}px, 0)`;
this._domNode.domNode.style.willChange = 'transform';
this._domNode.setWidth(width);
this._domNode.setHeight(height);
this._domNode.setLineHeight(height);
Expand Down
8 changes: 4 additions & 4 deletions src/vs/editor/browser/controller/editContext/textArea/textAreaEditContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -829,8 +829,8 @@ export class TextAreaEditContext extends AbstractEditContext {
const tac = this.textAreaCover;

applyFontInfo(ta, this._fontInfo);
ta.setTop(renderData.top);
ta.setLeft(renderData.left);
ta.domNode.style.transform = `translate3d(${renderData.left}px, ${renderData.top}px, 0)`;
ta.domNode.style.willChange = 'transform';
ta.setWidth(renderData.width);
ta.setHeight(renderData.height);
ta.setLineHeight(renderData.height);
Expand All @@ -844,8 +844,8 @@ export class TextAreaEditContext extends AbstractEditContext {
}
ta.setTextDecoration(`${renderData.underline ? ' underline' : ''}${renderData.strikethrough ? ' line-through' : ''}`);

tac.setTop(renderData.useCover ? renderData.top : 0);
tac.setLeft(renderData.useCover ? renderData.left : 0);
tac.domNode.style.transform = `translate3d(${renderData.useCover ? renderData.left : 0}px, ${renderData.useCover ? renderData.top : 0}px, 0)`;
tac.domNode.style.willChange = 'transform';
tac.setWidth(renderData.useCover ? renderData.width : 0);
tac.setHeight(renderData.useCover ? renderData.height : 0);

Expand Down
9 changes: 5 additions & 4 deletions src/vs/editor/browser/view/viewOverlays.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,13 +174,13 @@ export class ViewOverlayLine implements IVisibleLine {

this._renderedContent = result;

sb.appendString('<div style="top:');
sb.appendString('<div style="transform:translateY(');
sb.appendString(String(deltaTop));
sb.appendString('px;height:');
sb.appendString('px);height:');
sb.appendString(String(lineHeight));
sb.appendString('px;line-height:');
sb.appendString(String(lineHeight));
sb.appendString('px;">');
sb.appendString('px;will-change:transform;">');
sb.appendString(result);
sb.appendString('</div>');

Expand All @@ -189,7 +189,8 @@ export class ViewOverlayLine implements IVisibleLine {

public layoutLine(lineNumber: number, deltaTop: number, lineHeight: number): void {
if (this._domNode) {
this._domNode.setTop(deltaTop);
this._domNode.domNode.style.transform = `translateY(${deltaTop}px)`;
this._domNode.domNode.style.willChange = 'transform';
this._domNode.setHeight(lineHeight);
this._domNode.setLineHeight(lineHeight);
}
Expand Down
8 changes: 4 additions & 4 deletions src/vs/editor/browser/viewParts/glyphMargin/glyphMargin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -405,8 +405,8 @@ export class GlyphMarginWidgets extends ViewPart {
const left = this._glyphMarginLeft + widget.renderInfo.laneIndex * this._lineHeight;

widget.domNode.setDisplay('block');
widget.domNode.setTop(top);
widget.domNode.setLeft(left);
widget.domNode.domNode.style.transform = `translate3d(${left}px, ${top}px, 0)`;
widget.domNode.domNode.style.willChange = 'transform';
widget.domNode.setWidth(width);
widget.domNode.setHeight(this._lineHeight);
}
Expand All @@ -431,8 +431,8 @@ export class GlyphMarginWidgets extends ViewPart {

domNode.setClassName(`cgmr codicon ` + dec.combinedClassName);
domNode.setPosition(`absolute`);
domNode.setTop(top);
domNode.setLeft(left);
domNode.domNode.style.transform = `translate3d(${left}px, ${top}px, 0)`;
domNode.domNode.style.willChange = 'transform';
domNode.setWidth(width);
domNode.setHeight(lineHeight);
}
Expand Down
6 changes: 4 additions & 2 deletions src/vs/editor/browser/viewParts/margin/margin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,13 +85,15 @@ export class Margin extends ViewPart {
this._domNode.setLayerHinting(this._canUseLayerHinting);
this._domNode.setContain('strict');
const adjustedScrollTop = ctx.scrollTop - ctx.bigNumbersDelta;
this._domNode.setTop(-adjustedScrollTop);
this._domNode.domNode.style.transform = `translate3d(0, ${-adjustedScrollTop}px, 0)`;
this._domNode.domNode.style.willChange = 'transform';

const height = Math.min(ctx.scrollHeight, 1000000);
this._domNode.setHeight(height);
this._domNode.setWidth(this._contentLeft);

this._glyphMarginBackgroundDomNode.setLeft(this._glyphMarginLeft);
this._glyphMarginBackgroundDomNode.domNode.style.transform = `translate3d(${this._glyphMarginLeft}px, 0, 0)`;
this._glyphMarginBackgroundDomNode.domNode.style.willChange = 'transform';
this._glyphMarginBackgroundDomNode.setWidth(this._glyphMarginWidth);
this._glyphMarginBackgroundDomNode.setHeight(height);
}
Expand Down
9 changes: 5 additions & 4 deletions src/vs/editor/browser/viewParts/viewLines/viewLine.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,17 +183,17 @@ export class ViewLine implements IVisibleLine {
} else if (lineData.containsRTL) {
sb.appendString('dir="ltr" ');
}
sb.appendString('style="top:');
sb.appendString('style="transform:translateY(');
sb.appendString(String(deltaTop));
sb.appendString('px;height:');
sb.appendString('px);height:');
sb.appendString(String(lineHeight));
sb.appendString('px;line-height:');
sb.appendString(String(lineHeight));
if (lineData.textDirection === TextDirection.RTL) {
sb.appendString('px;padding-right:');
sb.appendString(String(options.verticalScrollbarSize));
}
sb.appendString('px;" class="');
sb.appendString('px;will-change:transform;" class="');
sb.appendString(ViewLine.CLASS_NAME);
sb.appendString('">');

Expand Down Expand Up @@ -234,7 +234,8 @@ export class ViewLine implements IVisibleLine {

public layoutLine(lineNumber: number, deltaTop: number, lineHeight: number): void {
if (this._renderedViewLine && this._renderedViewLine.domNode) {
this._renderedViewLine.domNode.setTop(deltaTop);
this._renderedViewLine.domNode.domNode.style.transform = `translateY(${deltaTop}px)`;
this._renderedViewLine.domNode.domNode.style.willChange = 'transform';
this._renderedViewLine.domNode.setHeight(lineHeight);
this._renderedViewLine.domNode.setLineHeight(lineHeight);
}
Expand Down
6 changes: 4 additions & 2 deletions src/vs/editor/browser/viewParts/viewLines/viewLines.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -678,8 +678,10 @@ export class ViewLines extends ViewPart implements IViewLines {
this._linesContent.setLayerHinting(this._canUseLayerHinting);
this._linesContent.setContain('strict');
const adjustedScrollTop = this._context.viewLayout.getCurrentScrollTop() - viewportData.bigNumbersDelta;
this._linesContent.setTop(-adjustedScrollTop);
this._linesContent.setLeft(-this._context.viewLayout.getCurrentScrollLeft());
const tx = -this._context.viewLayout.getCurrentScrollLeft();
const ty = -adjustedScrollTop;
this._linesContent.domNode.style.transform = `translate3d(${tx}px, ${ty}px, 0)`;
this._linesContent.domNode.style.willChange = 'transform';
}

// --- width
Expand Down
4 changes: 3 additions & 1 deletion src/vs/editor/contrib/stickyScroll/browser/stickyScrollWidget.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,9 @@ export class StickyScrollWidget extends Disposable implements IOverlayWidget {
this._setHeight(0);

const updateScrollLeftPosition = () => {
this._linesDomNode.style.left = this._editor.getOption(EditorOption.stickyScroll).scrollWithEditor ? `-${this._editor.getScrollLeft()}px` : '0px';
const left = this._editor.getOption(EditorOption.stickyScroll).scrollWithEditor ? `-${this._editor.getScrollLeft()}px` : '0px';
this._linesDomNode.style.transform = `translate3d(${left}px, 0, 0)`;
this._linesDomNode.style.willChange = 'transform';
};
this._register(this._editor.onDidChangeConfiguration((e) => {
if (e.hasChanged(EditorOption.stickyScroll)) {
Expand Down
Loading