我在 Magento 社区版上使用 Fabric JS 和淘汰赛 JS 开发了一个可定制邀请的网站。邀请产品在 Android 和所有 windows/Mac 版本的浏览器上运行良好，但在 iPhone 上不运行。一旦所有字体都加载到 iPhone 上，文本就会被分成多行、重叠和错位。
网站网址和产品网址（点击个性化按钮）：- http://candlebark.testingdemo.net/wedding-invitations/anchoredinloveweddinginvitation.html Popup U/P:- test/test@123
相同的产品 URL 在 iPhone 模拟器和浏览器堆栈上运行良好。
【问题讨论】：
看来我们遇到了完全相同的问题：
我不知道在我们使用 FabricJS 1.6.2 的案例中，当前的 2.X 版本中是否已经修复了这个问题，并且不能仅仅替换我们产品背后的主框架，所以我不得不找出发生了什么并找到这个：
以下问题仅发生在Safari for MAC and iPhone，所有其他浏览器都正常工作：
产品编辑器，将预定义的复杂 JSON 文件加载到画布中，然后初始化他的所有其他功能。
问题 1：错位的文字
在我们的例子中，不是文本放错了位置，事实上，当再次将 Canvas 导出为 JSON 时，ITEXT-Objects 的“宽度”发生了变化。
经过一些研究和实验，我发现编辑模式下的
character-width计算错误，导致整个 ITEXT-Object 加载后变大。
这也是整个事情的原因：It seems that Safari loads, renders the web-fonts slightly different, which messed up the calculation for FABRICJS.
我们的解决方案很简单：
- 我创建了一个检查当前浏览器的函数。
- 然后是一个禁用 Safari 字体预加载和初始化的函数。
现在编辑器再次加载一切正常，只是缺少目标字体。
当所有内容都加载并初始化后，AJAX-Call 才会再次在 Safari 中追加 Font-Header (Preload) 和 Font-Footer (Init)。
它在最后触发
canvas.renderAll();并有轻微的超时，我们的产品动机再次看起来相同（在不同的浏览器上）。
问题 2：奇怪的 ASCII 图标
MAC Safari 没有这个问题，但在 iPhone 上有时会出现这些奇怪的 ASCII 图标，就像您的屏幕截图中一样。但在我的情况下，只要目标字体没有完全加载并且画布被渲染。 (
canvas.renderAll();)
希望对您有所帮助，祝您好运！
【讨论】：