我正在我的 iPhone 上浏览 Svelte 文档，偶然发现了一个明显的 UI 错误。REPL 旋钮上的缺口完全偏离了位置。我一直想为开源项目做出贡献，我认为这会是一个快速简单的修复。事实证明，它不仅仅是更改一行 CSS 代码那么简单。
复制、调试和设置本地环境很有趣、很困难，也很有意义。
问题
我打开了浏览器的开发者工具，以为会在手机视图中看到同样的问题。但是，错误消失了。现在这是一个非常棘手的 CSS 问题。
💡 我学到了什么
如果您在 iOS 上使用 Chrome 作为浏览器，您仍然在使用 Safari 的渲染引擎。来自 维基百科
Chrome 使用 iOS WebKit——它是 Apple 为其 Safari 浏览器开发的自己的移动渲染引擎和组件——因此它无法使用 Google 自身的 V8 JavaScript 引擎。
caniuse 也证实了这一点，它在 iPS Safari 上提供了以下说明
现在很清楚为什么问题在我的机器上没有出现，但在我的手机上出现了。不同的渲染引擎！
在本地重现问题
我下载了 项目并在本地运行它。我通过在 模拟器以及我的实际 iPhone 上运行本地代码确认它仍然存在问题。macOS 上的 Safari 提供了一种简单的方法来打开每个模拟器的 DevTools 实例。
这提供了与在浏览器中相同的控制台访问权限，但适用于 iOS Safari。我不会撒谎，Apple 的开发体验一流（看到我做了什么？😬）。
我现在能够在本地重现问题了。
💡 我学到了什么
在下载 Svelte 存储库并在代码中查看了一段时间后，我注意到 UI 和 SVG 是通过一个名为 @sveltejs/site-kit 的包引入的。太好了，现在我需要我的本地版本的 site kit 被拉入 svelte/site，这样我就可以查看更改并调试问题。
我需要将 Svelte 的 package.json 中的 node_modules 指向我的本地 site-kit 副本。这听起来像一个 符号链接。在查看文档后没有找到太多有用的信息，我在 Google 上搜索了一番，并 偶然发现了 npm-link。这让我看到了自己的操作！
我现在可以对 site-kit 进行本地更改，并在 Svelte 项目中看到这些更改。
解决问题
说真的，这只需要一行更改
border: transparent;但是找到应该在哪里添加这行代码并不像你想的那样简单。项目的源代码映射还有一些问题，它显示这个 CSS 来自 Nav.svelte 组件，而实际上它来自另一个文件。这也是为项目做贡献的好方法！
然后你四处搜索并了解到这个问题正在被 处理，你了解了更多关于它是如何完成的。现在手机和桌面上的所有内容看起来都很好。
让我们回顾一下
最初只是一个快速的一行更改，却变成了一段旅程。我不得不
- 运行项目和组件存储库
- 了解系统链接
- 为 site-kit 贡献链接方面的文档
- 了解不同的浏览器渲染引擎
- 学习如何模拟 iOS Safari 浏览器
- 学习如何访问其调试器
- 在源代码映射无法正常工作时找到问题
- 修复问题（最终！）
当你独自工作时，你通常不会遇到这样的问题，或者需要构建一个复杂系统的思维模型并进行学习。你无法向维护人员学习。最重要的是，你无法看到构建一个受欢迎的技术产品所付出的所有努力。
当我向 CSS-Tricks 提交这个想法时，Chris 说他最近也遇到了类似的情况。**艰难的学习是持久的学习。**拥抱奋斗。
永不停止学习
我从 Svelte 项目中获取了另一个问题，现在我正在学习 CSSStyleSheet，因为还有一个问题（我认为），关于 Safari 如何处理 stylemanager.ts 中的关键帧动画。因此，学习继续沿着我日常工作中从未涉足的道路前进。
当某些东西出现故障时，享受学习系统的过程。您将获得宝贵的见解，了解该故障的原因以及可以采取哪些措施来修复它。这是参与开源项目的一大好处，也是我鼓励您也这样做的原因。
这就是为什么我不想在团队中工作的原因。这些工具和系统的额外开销令人沮丧。
我仿佛听到 Chris Coyer 说“技术债务”）。
我之前在 Safari 上遇到过一个错误，即仅更改 animation-play-state 属性而不是声明完整的 animation 属性会导致动画大约一半时间无法渲染。可以研究一下 Svelte 的动画在您在文章末尾提到的问题方面是否以这种方式构建。好文章！
我很好奇你是如何在 iPhone 上运行本地代码的。我 fork 了一个存储库并在 macOS 上的本地服务器上运行它，但我不知道如何将该代码复制到我的 iPhone 上进行测试。或者启动它。谢谢（我是一个新手开发者）
如果您在工作时使用无线局域网，则可以通过它访问任何内容，它会类似于这样：您正在开发内容的 PC 的 IP 地址/端口号。您需要在网络设置中使您的 PC 可被发现，并检查您的 PC 的 IPv4 地址。
一种方法是配置本地服务器以通过本地网络提供服务，然后在手机上访问您的机器的 IP 地址。
另一种方法是简单地使用 ngrok（或类似的工具），您可以将其指向您的本地端口，然后该端口通过互联网进行代理，然后您再次在手机上打开页面。此类工具的好处在于，如果您想向网络外部的人展示您的网站，则任何人都可以访问您的网站，而无需实际的服务器。
如果您设置了本地 LAMP 栈，则可以在 iPhone 上访问您的计算机（代码托管位置）的 IP 地址，您应该能够查看网站/应用程序。
如果你使用的是安卓系统，也可以这样做，甚至可以通过USB将手机连接到电脑，然后使用电脑上的Chrome调试工具来调试手机上的内容。
很多时候，我使用的是WordPress之类的系统，它使用.htaccess规则不允许我从本地网络查看，所以我不会使用这个技巧在实际设备上进行测试和调试。但是，在处理此类项目时，需求并不像需要进行如此大量的特定调试那样复杂。:)
border: transparent;隐式地将border-width设置为0px，并将border-style设置为none。这就是它起作用的原因。透明颜色实际上根本没有影响，因为border-width为0。因此，我认为border: none;是一个更清晰的修复方法。也就是说，感谢您为开源项目做出贡献！建立本地环境很少容易。
你说Safari中的Bug..
这。Safari正在迅速成为新的IE。我希望你为Safari提交了一个Bug。
并且祝你好运，永远能够在使用Windows机器时执行本文中提到的操作。顶级调试？更像是针对其特殊软件、使用其特殊硬件、造成麻烦的特殊调试器。就像微软多年来对IE缺乏支持一样。
这似乎是现代构建过程不必要复杂性的一个案例研究。我无法相信开发人员想要忍受无数小时的DevOps折磨来节省几行代码。
很棒的文章。感谢分享您如何为开源项目做出贡献。我也想开始贡献，所以这很有帮助。
好文章！我受到启发，想开始像这样为开源软件做出贡献！
感谢这篇文章，信息量很大。我一直觉得要参与开源项目，就必须帮助进行“真正的编程”。即使这不是项目的重点，设计也是每个开源项目的重要组成部分。开源应用程序的UI也必须美观且易于使用。
我正在查看我目前使用的应用程序，看看我的前端技能在哪里可能需要。
非常专注于解决这个问题。我不是程序员，所以对我来说，很多修复总是很麻烦。但这篇文章读起来很有趣。尤其是让模拟部分正常工作的努力。
这种Bug真的很让人讨厌，但是感谢您分享您的经验❤️
困难的问题是我们可用工具的不足，这些工具与浏览器技术的开发差距越来越大。像这样的错误应该自动检测，并且在原始开发过程中应该让原始开发人员意识到它。
很有意思，为什么透明设置有宽度？
不是
transparent将宽度设置为none。在简写border: transparent中只使用颜色不会设置border-style，因此它将获取默认值，即none。请参阅语法部分的注释：https://mdn.org.cn/en-US/docs/Web/CSS/border
好文章！我经常鼓励新的初级开发人员为开源项目做出贡献，因为这是一种表明他们比其他初级候选人“更专业”的方式……而这篇文章恰好解释了原因！
即使对OSS项目进行一行更改也需要大量工作，因此，如果雇主看到你能完成这项工作，他们就会更有信心相信你能完成他们工作中需要的工作。
很棒的发现！对于无法访问Mac的Windows 10用户，您有什么建议来解决Safari中的iPhone CSS问题吗？
我尝试了一些在线模拟器，但它们不太健壮。您建议走虚拟机路线吗？
我想这个Bug是在Safari端，而不是在Web应用程序端。无论如何，如果边框没有在CSS中显式设置，我想它应该具有默认值。
但也许只是不同的属性继承逻辑，所以我想有人可以检查Web标准并找出哪种实现是正确的。