Browsers Treat Big Sites Differently

Browsers Treat Big Sites Differently 浏览器对待大型网站的方式各不相同

Safari and Firefox change how big sites render based on the domain. TikTok, Netflix, Instagram… even SeatGuru. Chrome doesn’t. Why is that? Safari 和 Firefox 会根据域名改变大型网站的渲染方式。TikTok、Netflix、Instagram……甚至 SeatGuru 都在此列。而 Chrome 却不会。这是为什么呢？

Some browsers ship code that checks which domain you’re visiting and changes how the page renders based on it. Yup, you read that right. If site == X, do Y. TikTok gets special treatment. So does Netflix. So does Instagram. And so does SeatGuru. Safari and Firefox both do this. Chrome doesn’t. That tells us something interesting. 有些浏览器会内置代码，检查你正在访问的域名，并据此改变页面的渲染方式。没错，你没看错。如果网站是 X，就执行 Y。TikTok 享有特殊待遇，Netflix、Instagram 和 SeatGuru 也是如此。Safari 和 Firefox 都会这样做，但 Chrome 不会。这说明了一些有趣的问题。

The source code is right there if you want to look. These are literal domain checks baked into browser rendering engines that say things like “if the user is on this domain, render this differently” or “if they’re on that domain, handle that API call differently.” It’s not a bug. It’s a feature, and it ships to billions of devices. 如果你想看，源代码就在那里。这些是直接嵌入浏览器渲染引擎中的域名检查，它们会执行诸如“如果用户在该域名下，则以不同方式渲染”或“如果用户在该域名下，则以不同方式处理该 API 调用”之类的逻辑。这不是 Bug，而是一项功能，并且被部署到了数十亿台设备上。

Firefox’s about:compat

Firefox 的 about:compat

If you open Firefox and type about:compat in the address bar, you’ll see a list of site-specific interventions complete with toggle switches. Each one is a targeted fix for a specific website, and you can turn them off and watch sites break. 如果你打开 Firefox 并在地址栏输入 about:compat，你会看到一个包含开关的特定网站干预列表。每一个都是针对特定网站的修复方案，你可以将其关闭，然后看着这些网站出现故障。

Firefox’s WebCompat system injects custom CSS and JavaScript into specific domains, changes user agent strings for sites that sniff browsers incorrectly, and papers over bugs that would otherwise make the web feel broken. The interventions are tracked in Mozilla’s Bugzilla, complete with bug reports and sometimes failed outreach attempts to the sites in question. Firefox 的 WebCompat 系统会向特定域名注入自定义 CSS 和 JavaScript，为那些错误识别浏览器的网站修改 User Agent 字符串，并掩盖那些本会让网页看起来“坏掉”的 Bug。这些干预措施在 Mozilla 的 Bugzilla 中都有记录，包括完整的错误报告，有时还包括与相关网站沟通失败的记录。

Safari’s “quirks”

Safari 的“怪癖”（Quirks）

Safari’s WebKit engine calls them “quirks,” and the file Quirks.cpp is publicly available on GitHub. Reading through it is an education in how the web actually works. Here’s one comment from the code: Safari 的 WebKit 引擎将这些称为“怪癖”（Quirks），其 Quirks.cpp 文件在 GitHub 上是公开的。通读该文件，你会了解到互联网实际上是如何运作的。以下是代码中的一条注释：

Facebook, X (twitter), and Reddit will naively pause a <video> element that has scrolled out of the viewport, regardless of whether that element is currently in PiP mode. Facebook、X (Twitter) 和 Reddit 会在 <video> 元素滚动出视口时，盲目地将其暂停，而不考虑该元素当前是否处于画中画（PiP）模式。

So the browser detects when you’re on facebook.com, x.com, or reddit.com and changes how it handles Picture-in-Picture video. These companies wrote broken video code, and rather than wait for them to fix it, the browser shipped a workaround to every user. 因此，浏览器会检测你是否在 facebook.com、x.com 或 reddit.com 上，并改变其处理画中画视频的方式。这些公司编写了有缺陷的视频代码，浏览器没有等待他们修复，而是直接向所有用户推送了一个变通方案。

Here’s another comment: FIXME: Remove this quirk if seatguru decides to adjust their site. Someone added domain-specific rendering code for SeatGuru, and the comment implies outreach was attempted. SeatGuru didn’t fix their site, so the browser fixed it for them. 这是另一条注释：FIXME: 如果 SeatGuru 决定调整他们的网站，请移除此怪癖。 有人为 SeatGuru 添加了特定于域名的渲染代码，注释暗示曾尝试过沟通。但 SeatGuru 没有修复他们的网站，所以浏览器替他们修复了。

The commit history is a fascinating read. In just the last few months: Zillow’s floorplan images weren’t centering, TikTok was showing “please upgrade your browser” messages, Instagram Reels were resizing erratically during playback, Netflix’s “Episodes and Info” button was dismissing popovers incorrectly, Twitch was pausing PiP videos when you switched tabs, and Amazon Prime Video wasn’t letting Safari users watch at all. Each one got a domain-specific fix shipped to every single user. 提交历史非常引人入胜。仅在过去几个月里：Zillow 的平面图无法居中，TikTok 显示“请升级您的浏览器”消息，Instagram Reels 在播放时大小异常调整，Netflix 的“剧集与信息”按钮错误地关闭了弹窗，Twitch 在切换标签页时暂停了画中画视频，而 Amazon Prime Video 甚至完全不让 Safari 用户观看。每一个问题都得到了针对特定域名的修复，并推送给了每一位用户。

Chrome Is Different

Chrome 与众不同

The quirks files aren’t just fixing broken sites; they’re often compensating for Chrome’s control over what “working” means in the first place. The pattern goes like this: Chrome ships a feature, developers use it because Chrome dominates the market, and other browsers scramble to either implement the feature or add site-specific quirks to paper over the difference. By the time Safari or Firefox catches up, the quirk has already shipped to millions of users. 这些“怪癖”文件不仅是为了修复损坏的网站，它们往往是在弥补 Chrome 对“正常运行”这一定义的垄断。模式是这样的：Chrome 发布一项功能，由于 Chrome 占据市场主导地位，开发者们纷纷使用它，而其他浏览器则不得不忙于实现该功能，或者添加特定于网站的“怪癖”来掩盖差异。等到 Safari 或 Firefox 跟上时，这些“怪癖”早已推送给了数百万用户。

WebKit’s source code includes user agent overrides that make Safari pretend to be Chrome for specific sites like Amazon’s video pages and various streaming services. These sites sniff for Chrome and serve degraded experiences to everyone else, so rather than let Safari users suffer, WebKit lies about what browser it is. WebKit 的源代码中包含了 User Agent 覆盖设置，使 Safari 在访问亚马逊视频页面和各种流媒体服务等特定网站时伪装成 Chrome。这些网站会检测是否为 Chrome，并为其他浏览器提供降级体验，因此为了不让 Safari 用户受苦，WebKit 选择谎报自己的身份。

From the current Quirks.cpp source: 摘自当前的 Quirks.cpp 源码：

auto chromeUserAgent = "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/143.0.0.0 Safari/537.36"_s;

Safari literally ships with a fake Chrome user agent string, ready to deploy when sites refuse to work otherwise. Firefox does the same thing, and many of its about:compat interventions are user agent spoofs telling sites “yes, I’m Chrome” because those sites actively block or break on non-Chrome browsers. Safari 确实内置了一个伪造的 Chrome User Agent 字符串，以便在网站拒绝正常工作时随时启用。Firefox 也做了同样的事情，其许多 about:compat 干预措施都是 User Agent 欺骗，告诉网站“是的，我是 Chrome”，因为这些网站会主动屏蔽非 Chrome 浏览器或在非 Chrome 浏览器上出现故障。

The Mozilla wiki explains that some sites “block access completely, display a different design, or provide different functionality” based on browser detection. So Firefox ships workarounds. This creates a feedback loop. Developers build for Chrome because Chrome dominates. Their sites work best in Chrome. Users who hit bugs elsewhere blame the browser, not the site, so they switch to Chrome, reinforcing its dominance. Mozilla 的维基解释说，一些网站会根据浏览器检测结果“完全阻止访问、显示不同的设计或提供不同的功能”。因此，Firefox 只能提供变通方案。这形成了一个反馈循环：开发者为 Chrome 构建网站，因为 Chrome 占据主导地位；他们的网站在 Chrome 中运行效果最好；用户在其他地方遇到 Bug 时会责怪浏览器而不是网站，于是他们转向 Chrome，从而进一步巩固了 Chrome 的统治地位。

It Goes Deep

影响深远

These aren’t just cosmetic tweaks. Browsers change fundamental behavior based on your domain, including scrolling behavior, touch event handling, viewport calculations, and image MIME type handling. The list in WebKit alone runs to thousands of lines. 这些不仅仅是表面上的调整。浏览器会根据域名改变基本行为，包括滚动行为、触摸事件处理、视口计算和图像 MIME 类型处理。仅 WebKit 中的列表就有数千行之多。

Here’s one about simulated mouse events: When panning on an Amazon product image, we’re either touching on the #magnifierLens element or its previous sibling. The browser checks if you’re on Amazon and changes how touch-to-mouse event translation works for their product zoom feature. Amazon’s site assumes certain event behavior that Safari doesn’t provide by default, so Safari provides it anyway, but only for Amazon. 这里有一个关于模拟鼠标事件的例子：在平移亚马逊产品图片时，我们触摸的是 #magnifierLens 元素或其前一个兄弟元素。浏览器会检查你是否在亚马逊网站上，并改变其产品缩放功能的触摸转鼠标事件转换方式。亚马逊网站假设了 Safari 默认不提供的某些事件行为，所以 Safari 无论如何都会提供它，但仅限于亚马逊网站。

There are quirks for storage access, scrollbar rendering, autocorrection behavior, and zoom handling. Each one is behind a domain check, and each one is compiled into the browser executable. 还有针对存储访问、滚动条渲染、自动更正行为和缩放处理的“怪癖”。每一个都由域名检查控制，并被编译进浏览器的可执行文件中。

Chrome Doesn’t Need a Quirks File

Chrome 不需要“怪癖”文件

You might have noticed something. I’ve shown you Firefox’s about:compat and WebKit’s Quirks.cpp, but where’s Chrome’s equivalent? Chrome doesn’t really need one, and not necessarily because Chrome is better engineered. The web is already built for Chrome. When over 80% of users… 你可能已经注意到了。我向你展示了 Firefox 的 about:compat 和 WebKit 的 Quirks.cpp，但 Chrome 的对应物在哪里呢？Chrome 其实并不需要它，这并不一定是因为 Chrome 的工程设计更好。互联网本身就是为 Chrome 构建的。当超过 80% 的用户……