Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: 解决了firefox的问题,可能解决了safari的问题 #10

Merged
merged 1 commit into from
Jul 12, 2022

Conversation

HomeArchbishop
Copy link
Contributor

firefox的问题

make.js里metrics.fontBoundingBoxDescentmetrics.fontBoundingBoxAscent在firefox下不支持。我做了适当的替换,换成了用fontSize表示。不知是否合适。(我测试了一下应该没问题)

safari阴影

其实我没有遇到 issue#1 那种三叠重影,只是发现阴影有点重。我在 make.js 中的 ctx.shadowBlur 做了适当的修改。
当然系数我不知道多少合适,有待讨论,我标在 221 行注释里了。

预览

桌面(chrome safari firefox)

desktop

firefox ios

IMG_0846

chorme ios

IMG_0847

safari ios

IMG_0848

@itorr
Copy link
Owner

itorr commented Jul 12, 2022

太妙了!感谢 pull!

测试下来 火狐上的绘制报错确实是高度错误导致的。
iOS Safari 三重叠影的问题我依旧没找到原因,之前通过在 fontFamily 中加入 fallback 字体(不管是否能实际匹配到)三重叠影的问题消失了、但阴影依旧是三层弥散叠加的重度,目前加上针对 Safari 减淡弥散范围我觉得已经结果上解决了这个问题 😍
我直接 Merge !

@itorr itorr merged commit 1f948ba into itorr:main Jul 12, 2022
@HomeArchbishop
Copy link
Contributor Author

感谢认同🤣
不过部署的时候还请注意一下,index.html 的那个提示我没改

僅支持案頭端 Chrome、Edge 瀏覽器。
Safari、Firefox 下存在嚴重問題

@itorr
Copy link
Owner

itorr commented Jul 12, 2022

感谢认同🤣 不过部署的时候还请注意一下,index.html 的那个提示我没改

僅支持案頭端 Chrome、Edge 瀏覽器。
Safari、Firefox 下存在嚴重問題

是的,终于可以把这个提示去掉了🤣

Safari canvas 系列 API 的内存占用限制通过共用绘制元素也已经基本解决,正好一起上线www 🥰

@itorr
Copy link
Owner

itorr commented Jul 12, 2022

我去复盘了一圈,总算好像理解了这个 bug 的根源,Safari  会在 字重 600 以上时 通过简单的横向重复渲染字型让字体看起来变重,在这个过程中没有考虑阴影之类的细节 🤬🤬🤬

不愧是 Safari、仿佛现代 IE6,每次都能在她身上发现匪夷所思的神奇特性

@itorr itorr added the bug Something isn't working label Jul 16, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants