夸克浏览器加载 Vue、React 或 Next.js 这些前端框架构建的页面时，经常会出现各种奇怪布局问题：

• 文字莫名其妙叠在一起
• 卡片像被踩过一样塌陷
• 按钮飘到角落
• 滚动条消失
• Canvas 渲染偏移……

问题出在哪？根本原因其实挺简单：夸克霸占了 visualViewport 的缩放控制权，拦截了浏览器正常的布局触发时机。同时它对现代 CSS 特性（比如 :has()、container queries、subgrid 这些）的支持又不够完整。最终结果就是，框架完成 hydration 之后，DOM 树和样式树对不上号了。

怎么治呢？一个一个来，从最核心的动手。

禁用实验性渲染 Flag 并重启内核

夸克里默认开了几个 Chromium 的实验性功能：LayoutNG 和 Scroll Unification。这两个东西会覆盖前端框架自己算好的盒模型逻辑。对 React 的 concurrent rendering 和 Vue 的 transition-group 布局影响尤其明显。

解决办法：

• 在夸克地址栏输入 【quark://flags】 并回车，进入实验性设置页。
• 搜索框里依次找三项：LayoutNG、Scroll Unification、Preferred OOM Score。
• 把这仨全部设成 【Disabled】 ——注意，不是“Default”，得手动选禁用。
• 翻到底部，点“重启夸克浏览器”，等它完全退出再自动打开。这一步不能省，只刷标签页解决不了问题。

清除前端专属缓存与 JS 模块快照

夸克会把 Webpack/Vite 打包后的 chunk 脚本、CSS-in-JS 注入的规则、还有 SSR hydration 的快照，通通存成二进制缓存。缓存一旦坏掉，以下场景一律会出现：

• React 组件加载后样式飞走
• Vue 的 useSlots 返回 null
• Next.js App Router 的 layout.tsx 不生效

方法一：精准清除（推荐）

进“设置” → “隐私与安全” → “清除浏览数据”。勾上“缓存的图片和文件”、“Cookie 及其他网站数据”、“托管应用数据”三项，【时间范围一定选“所有时间”】，否则 Vite 的 HMR 残留缓存仍会作怪。

方法二：强制绕过缓存重载

在问题页面上，长按地址栏 → 点击“刷新”按钮旁的小箭头 → 选“强制刷新”。这个操作会跳过 Service Worker 和内存缓存，直接让服务器返回全新的 HTML + JS bundle。

注入 viewport 锁定脚本并监听 visualViewport

前端框架页面通常只写 ，但夸克会自己再往里面加 scale 值。必须用脚本来覆盖原始 meta，并实时拦截缩放事件。否则 hydration 之后的 CSS transform 属性会被夸克改成一个不等于 1 的值。

第一步：重写 viewport 元标签

地址栏清空，粘贴以下代码，点击“前往”执行：
ja vascript:(function(){const v=document.querySelector('meta[name="viewport"]');if(v)v.setAttribute('content','width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no');})()

第二步：绑定 visualViewport 缩放监听器

再一次点击地址栏，粘贴并执行：
ja vascript:(function(){document.addEventListener('DOMContentLoaded',()=>{if(window.visualViewport){window.visualViewport.addEventListener('resize',()=>{if(window.visualViewport.scale!==1){window.visualViewport.scale=1;window.scrollTo(0,0);document.body.offsetHeight;}});}})();})()

执行完立刻刷新页面。验证成功的唯一标志是：双指捏合完全不起作用了。

切换为兼容内核并关闭智能排版

前端框架会依赖标准 Blink 的行为，但夸克的“极速模式”却对 Shadow DOM、Custom Elements、IntersectionObserver 的触发时机做了一些过激优化。结果就是：

• Vue3 的 defineCustomElement 不工作
• React 的 useLayoutEffect 提前触发

操作步骤：

• 点一下地址栏左侧的那个网站图标 → 打开站点信息面板 → 点“使用兼容模式打开”。
• 新标签页加载后，立刻点击地址栏右侧的“AA”图标 → 关掉“智能排版”和“字体自适应”。

这两项一关，页面就放弃了夸克的 DOM 重写逻辑，回到原生 CSSOM 构建流程。同时，React Strict Mode 下的双 render 异常也会一并消失。

临时禁用脚本拦截以保全 hydration 流程

夸克内置的“增强广告屏蔽”有时会误删前端框架必需的 runtime 脚本，比如：

• @vite/client 的热更新通道
• next/font 的 font-face 注入器
• emotion 的 css cache 初始化函数

一旦删了，hydration 之后的样式就是空白。

操作步骤：

• 在问题页面，点地址栏左侧的“盾牌图标” → 看看“增强广告屏蔽”或“脚本拦截”是否开启 → 如果开着，关掉它。

刷新页面后，到控制台里扫一眼，看看还有没有 【Failed to load resource: net::ERR_BLOCKED_BY_CLIENT】 的报错。如果有，说明拦截没完全关掉，得回盾牌页逐项检查。