Skip to content

[diffs] WebKit Experiments #751

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

Draft
amadeus wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

[diffs] WebKit Experiments #751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d39d7e0
Quick tweak to apply mobile safari overflow hack to normal webkit
amadeus May 30, 2026
0c9dea4
Disable syntax highlighting
amadeus Jun 2, 2026
1c7d921
Optimize toggle
amadeus Jun 2, 2026
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
50 changes: 32 additions & 18 deletions packages/diffs/src/components/CodeView.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,22 +475,29 @@ interface SpringStepResult {
velocity: number;
}

// A vibe slopped heuristic to detect mobile safari only
const MOBILE_SAFARI = (() => {
const { navigator } = globalThis;
let forceOptimize = false;

const userAgent = navigator.userAgent;
const isIOS = /iP(?:hone|ad|od)/.test(userAgent);
const isIPadOS =
navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1;
if (typeof window !== 'undefined') {
// @ts-expect-error
window.__OPTIMIZE = () => {
forceOptimize = !forceOptimize;
console.log('Optimized:', forceOptimize);
};
}

return (
(isIOS || isIPadOS) &&
/AppleWebKit/.test(userAgent) &&
/Safari/.test(userAgent) &&
!/(CriOS|FxiOS|EdgiOS|OPiOS)/.test(userAgent)
);
})();
// A vibe slopped heuristic to detect WebKit browsers without matching
// Chromium, which includes AppleWebKit in its user agent for compatibility.
let IS_WEBKIT = () => {
return forceOptimize;
// const { navigator } = globalThis;
//
// const userAgent = navigator.userAgent;
//
// return (
// /AppleWebKit/.test(userAgent) &&
// !/(Chrome|Chromium|CriOS|Edg|EdgiOS|OPR|OPiOS)/.test(userAgent)
// );
};

type PendingAlignTypes = Exclude<CodeViewLineScrollTarget['align'], 'nearest'>;

Expand Down Expand Up @@ -762,17 +769,21 @@ export class CodeView<LAnnotation = undefined> {
this.pointerEventsDisabled = true;
}

// This is a really important fix for mobile safari; under aggressive scroll
// This is a really important fix for WebKit; under aggressive scroll
// conditions we'll eventually crash/reload the page. It appears to be
// caused by the fact that the code wrapper elements are horizontally
// scrollable, so while aggressively scrolling, we disable scrolling. We
// don't want to apply this fix to good browsers since in those cases it
// don't want to apply this fix to other browsers since in those cases it
// can fuck with layout in ways that aren't appropriate
if (MOBILE_SAFARI && !this.codeOverflowFix) {
if (IS_WEBKIT() && !this.codeOverflowFix) {
this.stickyContainer.style.setProperty(
SCROLLING_CODE_OVERFLOW_FIX_VARIABLE,
'hidden'
);
this.stickyContainer.style.setProperty(
'--diffs-scrollbar-gutter-override',
'0px'
);
this.codeOverflowFix = true;
}

Expand All @@ -793,7 +804,10 @@ export class CodeView<LAnnotation = undefined> {
if (this.codeOverflowFix) {
this.stickyContainer.style.setProperty(
SCROLLING_CODE_OVERFLOW_FIX_VARIABLE,
'auto'
'scroll'
);
this.stickyContainer.style.removeProperty(
'--diffs-scrollbar-gutter-override'
);
this.codeOverflowFix = false;
}
Expand Down
1 change: 1 addition & 0 deletions packages/diffs/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -786,6 +786,7 @@
)
);
scrollbar-gutter: stable;
overflow-anchor: none;
}

[data-diffs-scrollbar-measure] {
Expand Down
5 changes: 5 additions & 0 deletions packages/diffs/src/worker/WorkerPoolManager.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ import type {
} from './types';

const IGNORE_RESPONSE = Symbol('IGNORE_RESPONSE');
const DISABLE_HIGHLIGHTING = true;

class WorkerPoolTerminatedError extends Error {
constructor() {
Expand Down Expand Up @@ -559,6 +560,7 @@ export class WorkerPoolManager {
// attempt to highlight. This should be mostly never hit, but it's just an
// extra level of safety
if (
DISABLE_HIGHLIGHTING ||
isFilePlainText(file) ||
(cachedResult != null &&
areFileRenderOptionsEqual(
Expand All @@ -583,6 +585,7 @@ export class WorkerPoolManager {
const cachedResult = this.getFileResultCache(file);
const highlightKey = this.getFileHighlightKey(file);
if (
DISABLE_HIGHLIGHTING ||
highlightKey == null ||
isFilePlainText(file) ||
(cachedResult != null &&
Expand Down Expand Up @@ -628,6 +631,7 @@ export class WorkerPoolManager {
// attempt to highlight. This should be mostly never hit, but it's just an
// extra level of safety
if (
DISABLE_HIGHLIGHTING ||
isDiffPlainText(diff) ||
(cachedResult != null &&
areDiffRenderOptionsEqual(
Expand All @@ -652,6 +656,7 @@ export class WorkerPoolManager {
const cachedResult = this.getDiffResultCache(diff);
const highlightKey = this.getDiffHighlightKey(diff);
if (
DISABLE_HIGHLIGHTING ||
highlightKey == null ||
isDiffPlainText(diff) ||
(cachedResult != null &&
Expand Down
Loading