我们最有趣的前端错误（2020）
错误和奇怪的故障是每个开发人员的常见景象。对于前端，这是由前端开发环境放大，这是极其多样化和古怪的。它基于三种不同类别的三种不同类别（标记 - HTML，STYLE - CSS和脚本 - JavaScript），其具有Quirks的公平份额;此外，它还包含不同的浏览器，不同的设备，不同的功能（屏幕大小，触摸交互等），列表继续。事情有时会变得凌乱，这可能会导致一些诅咒，但最终也带来了一些好笑。
希望能够在未来举起你的心情或拯救你一堆调试时间，这是我们在犹太教的（近期）过去发现的最有趣，最奇怪或彻头彻尾的烦恼的错误。
当我们为我们开发的图书馆准备一组文档页面时，此错误浮出水面，我们的客户将在其网站上使用。我们看到HTML元素的奇怪定位问题，同时开发一些但不是所有示例。我们无法弄清楚为什么两个简单的HTML页面没有自定义CSS框架，库（除了我们自己的），或者任何一个花哨的东西，而且基本上所有的代码都有两者之间共享的所有代码都具有如此奇怪的不一致。然后......有人随便提到doctype。
结果，大约一半的页面具有标准＆lt; doctype html＆gt;指定，而另一个没有（可能是因为复制粘贴错误）。当浏览器在HTML文档的开始时没有找到合适的DoctypEclaration时，它们会回到所谓的“QUIRK Mode”，这是... Quirky。它是一种兼容性“功能”，允许浏览器在渲染时，浏览器在CSS规范甚至没有完成时内置的非标准网页时。它看起来与常规HTML5类似......直到它没有。微妙的差异使得这个错误非常令人讨厌。一旦我们意识到这个问题，就完全添加了Dockypisolved的错误，并“无痛”。
...直到您意识到您必须添加所有这些HTML，身体{高度：100％}，因为某种原因是QUIRKS模式下的默认设置。有多烦人......
虽然以前的问题很难发现，但这一个是在不同的联赛中。我们已经报告了由我们的客户试图将文件上传到Tron造成的错误。当尝试使用我们的“仪表板”Web应用程序上传内容时，客户端将文件上载到临时S3存储桶，然后调用一个执行“繁重升降”的服务，从桶中获取并导入它。问题是由Safari完成的上传引起的，并且文件总是在文件名中有某种重音字母。但是，我们知道口音是由我们的服务正确处理的，并无法弄清楚为什么将参与野生动物园。
经过相当多的时间浪费试图了解正在发生的事情，我们发现：
“罪魁祸首”是使用“组合重音”形式的重点的文件，这些文件在视觉上与常规重音信中无法区分（我们通过随机注意到它的两个文件名，该文件具有相同长度的两个锉刀实际上具有1个字符的长度不同的长度因为结合了口音用法）;
上传到S3并在调用我们的Web服务时以两种不同的方式处理文件名：在第一种情况下，它将作为路径参数传递，而在第二个中，它将在具有JSON Body的帖子中传递;
Safari对所有请求主体的归一化应用于“折叠”将重点与其单一字符等效的所有请求主体进行了归一化，但它与URL不这样做;这种差异导致名称不匹配和“未找到”类型错误;
这个问题的修复并不是无痛;我们被迫将所有文件名标准化为Safari，以避免不一致，并这样做，因此我们无法保证客户文件名和Chron中的文件名之间的匹配，这是一个被视为可取的财产，但由于此错误而需要放松。
Safari在我们的前端开发人员中获得了Not-So-Wind Internet Explorer“昵称，它不应该是一个惊喜。
我们在Web应用程序中使用相当一点的常见UX模式是“墙”可视化，它是调整自身尺寸以适应页面宽度的块网格，以便较小的设备看到较小的缩略图和更大的屏幕完全使用可用空间。然而，允许这种良好的用户体验的块的响应性可能导致问题：
您可能已经猜到发生了什么：在调整到非常特定的视口大小的大小时，触发以下循环：
块水平展开并且还垂直（保持宽高比），足以要求滚动条出现;
滚动条“窃取空间”到内容，减少宽度并提示降低块大小;
由于块垂直缩小，因此滚动条不再需要并且被移除，越来越多的宽度;
这种情况有很多解决方案（风格的内容，使其在滚动条出现时不会改变宽度，或者如果这是一个选项，那么滚动栏总是可见）但是，这些都没有真正令人满意，因为他们都阻止了我们实现布局我们的设计人员为该接口设想。这个问题让我们留下了迫在眉睫的感觉，即它并没有完全“解决”，这只是准备每次开发新东西时遇到我们。
这个不是一个错误，只是一个有趣的互动，使我们的一天（而且，出乎意料地，没有打破任何东西！）。在我们的内部开发环境中部署后，我们发现我们刚部署的应用程序版本是“无限”，以便有一些奇怪的原因。由于我们很多人都是Marvel Universe的粉丝，那么一个MEME被迅速创造出来：
这种有趣的事件是由我们的版本化约定引起的。我们将一个版本标识符分配给我们的内部/开发构建，其模式类似于x.y.z-＆lt; of-sha-sha＆gt ;;然后由我们的构建管道（Jenkins）解析，该管道（Jenkins）将其替换为我们的应用程序代码所需的位置。但是，在从“6E1231”开始处理Commit SHA时，发生了一个类型转换的MISHAP（它被解释为指数符号编号而不是字符串），我们的版本会迅速到无穷大。从那以后我们已经改变了我们的版本化约定，我们与新方法更快乐，但我有点难过，改变阻止了这个错误再次发生。
在开发我们的360产品视图时，我们偶然发现了一个“错误”（没有一个错误的错误列表，没有一个IE错误），导致我们基本上浪费一整天试图了解正在发生的事情。我们正在尝试使用一个jQuery插件进行360个实现工作，使图像变焦无痛。插件“捕获”几乎所有鼠标事件并在内部处理它们，因此我们需要在达到它之前拦截它们之前拦截它们。我们的解决方案是一个重叠的透明元素，处理我们需要使用的事件，然后将事件转发到插件。随着所有这些动作的零件在一起，发现IE9-10有关拦截事件的问题并不奇怪;然而，当有人开玩笑地建议将Div替换为透明形象时，我们惊讶地看到虫子消失了。显然老IES忽略透明元素上的鼠标事件，但透明图像足以欺骗他们不再忽略事件。除了被迫雇用这样一个丑陋的解决方法的失望外，我们还是嘲笑解决方案的“随机性”，因为我们最终雇佣了一个笑话来修复一个模糊的错误，我们无法弄清楚如何处理其他问题。
编码是一项精神税收活动; 很容易让压力和（有时）愤怒接管并使每个人都更糟糕的环境。 这就是为什么我相信模因和笑话不是浪费时间，能够嘲笑虫子甚至是你自己的错误是至关重要的。 寻找享受我们工作的有趣方面的时间只能改善我们和我们的同事的工作日。 您遇到的最有趣，最有趣或彻头彻尾的奇怪虫子是什么？ 让我们在评论中知道！
