我开发了一个网站，用于使用Fabric JS和Magento社区版本的淘汰JS进行可自定义的邀请。邀请产品在Android和所有Windows / Mac版浏览器上运行正常但在iPhone上运行不正常。一旦所有字体都加载到iPhone上，文本就会被多行，重叠和错位放置。
网站网址和产品网址（点击个性化按钮）： - http://candlebark.testingdemo.net/wedding-invitations/anchoredinloveweddinginvitation.html 弹出U / P： - 测试/测试@ 123
相同的产品网址在iPhone模拟器和浏览器堆栈上正常运行。
答案 0 :(得分：1)
我们似乎有完全相同的问题：
我不知道在我们使用FabricJS 1.6.2的情况下是否已经修复了当前的2.X版本，并且我们无法替换我们产品背后的主框架，所以我必须找出发生了什么并找到了这个：
以下问题仅发生在Safari for MAC and iPhone上，所有其他浏览器都运行良好：
产品编辑器，将预定义的复杂JSON文件加载到画布中，然后初始化其他所有函数。
问题1：错位文字
在我们的例子中，文本并没有放错位置，实际上在将Canvas再次导出到JSON时，＆＃34; width＆＃34; 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();）
希望有所帮助，祝你好运！