Crius
(Crius)
1
我们有很多使用 Apple 设备和/或基于 WebKit 的浏览器的用户报告在滚动话题时出现问题，导致论坛无法使用。
例如，视频记录在此处：here。
经过大量挖掘，似乎最可能的原因是 WebKit 在处理图像缩放方面……我该如何委婉地说……很糟糕。
然而，这也让我注意到表情符号在渲染的 HTML 中是如何显示的，我想澄清一下，因为也许我错过了一些可以阻止这种情况发生的配置。
绿色部分显示的是表情符号的原始尺寸。
蓝色/青色/随便什么颜色是 Discourse 在渲染内容时添加的默认属性。
红色部分是我编写的插件添加的 CSS：
- 导入表情符号（数量很多）
- 添加一些自定义 CSS 以使它们正确渲染，因为它们并非全部是“20x20”
现在我进行了一个简单的测试。从该话题数据库的 cooked 字段中删除了所有 width="20" height="20"，并要求用户再次尝试查看话题、滚动、回复，即使有人在发布新帖子，但不要使用表情符号，以免再次将这两个属性注入表情符号的渲染 HTML 中。
显然，这就是导致 WebKit 上出现问题的根源，因为我收到的所有报告都证实，在删除了这两个属性后，滚动不再出现问题。
那么，有没有办法阻止 Discourse 添加这些参数？为什么 Discourse 假设每个表情符号都是“20x20”，并且通过 HTML 属性强制执行，而不是使用 CSS？
谢谢。
Canapin
(Coin-coin le Canapin)
2
我在我的 iPad 上可以重现这个问题，但在 Chrome 桌面版上不行。
我向上滚动，时间线会回到上一篇帖子，这使得很难滚动过去并进一步向上查看时间线。
但我很难稳定地重现它。我卡在了第 1955 篇帖子，但在我能够向上滚动过去之后，如果我再向下滚动然后再次向上滚动，它就不会再阻止我了 
Crius
(Crius)
3
原因是每次“懒加载”新表情符号并渲染 size 属性时都会发生这种情况。
渲染后，问题就不会发生。但是，如果您浏览包含大量回复且表情符号使用相当频繁的主题，您会不断看到此行为发生，这将导致无法使用 Discourse。
我们设法在自定义主题中“修复”了它，但我认为默认主题也应该解决这个问题，或者更好的是，在处理帖子的函数中解决，因为我看不到有理由应用这些与大小相关的 HTML 属性，而不是使用简单的 CSS。
我补充一点，iOS 上的每个浏览器似乎都使用 webkit，因此这主要将是苹果设备的一个问题。不过我不是这方面的专家，所以请谨慎对待。需要进行更多测试。
1 个赞
这是因为所有 标准化的 Unicode 表情符号 都旨在适合正方形，并且我们假定网站希望其表情符号以一种与文本和其他表情符号一起使用的方式进行一致的大小调整 
如果那个茶壶是 50x50，它会在行之间产生巨大的间隙，如下所示：
关于它最初添加时的一个很好的解释：
并附有来自 Multimedia: Images - Learn web development | MDN 的支持详细信息：
当 HTML <img> 元素包含图像的 width 和 height 属性时，浏览器可以在图像加载之前计算图像的纵横比。此纵横比用于预留显示图像所需的空间，从而减少甚至防止图像下载并绘制到屏幕时发生的布局偏移。减少布局偏移是良好的用户体验和 Web 性能的一个重要组成部分。
…
…
尽管过去十年的开发者最佳实践可能建议省略 HTML <img> 元素上的图像 width 和 height 属性，但由于纵横比映射，包含这两个属性被认为是开发者的最佳实践。
说了这么多，你举了一个默认大小不适用于所有表情符号的合理例子……那个旧的干杯表情符号的宽度是它的 3 倍，所以它不能很好地适应正方形。其他应用程序限制所有表情符号为正方形并不罕见，所以我们的行为并不算太奇怪（例如，Slack 和 Discord 都是这样做的）……但我们也可以考虑允许自定义表情符号选择性地设置尺寸。
2 个赞
rrit
(Ayke)
6
从 CSS 方面来看，这很容易实现：
img.emoji {
width: auto; /* 替换 width: 20px; */
height: 20px;
vertical-align: text-bottom;
}
（有关解释，请参阅 DEV: add native lazy loading for emojis by rr-it · Pull Request #15830 · discourse/discourse · GitHub
更困难的部分在于“自定义表情符号”和表情符号渲染：
- 自定义表情符号需要为每个表情符号添加一个额外的属性：
aspect-ratio（或者作为替代的 height 和 width）。
- 表情符号渲染必须为自定义表情符号使用新的
aspect-ratio 属性，以相应地改变 width——height 保持为 20px。
自定义表情符号的快速简便方法：
对于自定义表情符号 img 标签，仅设置 height="20"，根本不设置 width——从而放弃了设置 aspect-ratio/width 和 height 的好处。
CSS：img.emoji { width: auto; }
2 个赞
