Fix iframe size feedback loop on Linux/Windows (#54)
Compensate for viewport scrollbar width in size change notifications. On Linux/Windows, scrollbars consume space from the content area, causing a feedback loop where the iframe progressively shrinks to zero. - Use window.innerWidth - clientWidth to detect scrollbar width - Use max of getBoundingClientRect (CSS transforms) and scroll dimensions (content overflow) to report accurate size 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <noreply@anthropic.com>
This commit is contained in:
parent
ff6f5f0edd
commit
1cf95e53e4
1 changed files with 12 additions and 5 deletions
17
src/app.ts
17
src/app.ts
|
|
@ -745,6 +745,7 @@ export class App extends Protocol<Request, Notification, Result> {
|
||||||
*/
|
*/
|
||||||
setupSizeChangeNotifications() {
|
setupSizeChangeNotifications() {
|
||||||
let scheduled = false;
|
let scheduled = false;
|
||||||
|
|
||||||
const sendBodySizeChange = () => {
|
const sendBodySizeChange = () => {
|
||||||
if (scheduled) {
|
if (scheduled) {
|
||||||
return;
|
return;
|
||||||
|
|
@ -752,11 +753,17 @@ export class App extends Protocol<Request, Notification, Result> {
|
||||||
scheduled = true;
|
scheduled = true;
|
||||||
requestAnimationFrame(() => {
|
requestAnimationFrame(() => {
|
||||||
scheduled = false;
|
scheduled = false;
|
||||||
const rect = (
|
const el = document.body.parentElement ?? document.body;
|
||||||
document.body.parentElement ?? document.body
|
const rect = el.getBoundingClientRect();
|
||||||
).getBoundingClientRect();
|
// Compensate for viewport scrollbar on Linux/Windows where scrollbars
|
||||||
const width = Math.ceil(rect.width);
|
// consume space. window.innerWidth includes scrollbar, clientWidth excludes it.
|
||||||
const height = Math.ceil(rect.height);
|
const scrollbarWidth =
|
||||||
|
window.innerWidth - document.documentElement.clientWidth;
|
||||||
|
// Use max of rect (includes CSS transforms) and scroll dimensions (content overflow).
|
||||||
|
const width = Math.ceil(
|
||||||
|
Math.max(rect.width, el.scrollWidth) + scrollbarWidth,
|
||||||
|
);
|
||||||
|
const height = Math.ceil(Math.max(rect.height, el.scrollHeight));
|
||||||
this.sendSizeChange({ width, height });
|
this.sendSizeChange({ width, height });
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue