#碎碎念 #坑
今日帮实习生看的一个 bug，踩的小坑，本地局域网真机调试的时候一直会报错 TypeError: crypto.randomUUID is not a function ，localhost 没有，线上也没有，是 web-llm 库用到的。

查到的原因是：crypto.randomUUID() 是 Web Crypto API 的一部分，仅在安全上下文（HTTPS）下可用。localhost 被视为安全来源，即使没有 HTTPS 也能使用该 API；但对于其他自定义域名，必须启用 HTTPS。

像这种情况一般需要解决么（陷入沉思）

StackOverflow | TypeError: crypto.randomUUID is not a function

翻到另外一个：StackOverflow | How do I create a GUID / UUID?

很好，群友说 Next 自带！
https://nextjs.org/docs/app/api-reference/cli/next#using-https-during-development

cosine - 前端人の日常频道

#碎碎念 #移动端适配 #坑 我恨 Safari（咬牙切齿） 当你在用svg + foreignObject + transform 和 svg 里各种定位的时候会在 Safari 上收获一坨 bug！！！还贼 tm 难调，日常安卓上和设备仿真上都是正常的 Safari 异常 我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式（在我的例子中是一个按钮）时，它会在 SVG 上绝对定位。但是当我移除 opacity…

#碎碎念 #坑
🤡 败了，经过几天的奋斗认清事实了，不用 svg 了直接定位了，svg + foreignObject + transform + 一些 xy 魔法在 Safari 里就是古神一般的存在，同样的代码在 Chrome 里 work 的非常自然，打开 Safari 的时候定位全乱是多么痛的体验，调试起来也是完
折磨。换了 dom + 绝对定位实现完整个人都舒心了无比流畅。

为什么，为什么这个定位会偏，为什么安卓上不会偏（选中）（看size看坐标）（对的啊）

有空想办法整整最小复现看看。

#碎碎念 #移动端适配 #坑
我恨 Safari（咬牙切齿）
当你在用svg + foreignObject + transform 和 svg 里各种定位的时候会在 Safari 上收获一坨 bug！！！还贼 tm 难调，日常安卓上和设备仿真上都是正常的 Safari 异常

我发现 iOS Safari 中有关 foreignObject 的一个奇怪的错误。当我为 opacity 中的 HTML 内容设置 CSS 样式（在我的例子中是一个按钮）时，它会在 SVG 上绝对定位。但是当我移除 opacity 后，它就按照预期定位了。调试这个问题花了我几个小时。

尝试将您的 foreignObjects 包裹在 group 元素中。我发现使用变换样式 foreignObjects 在 Safari 中效果不佳。

Sing with me Safari is the new IE！

啊！！！破问题害我挠头了一下午。

https://stackoverflow.com/questions/51313873/svg-foreignobject-not-working-properly-on-safari

看着像是 09 年就发现了的问题，现在也没修。
https://bugs.webkit.org/show_bug.cgi?id=23113

#前端 #css #坑

踩了个小坑， th > tr 标签sticky时设置 border 会失效，设置 border-collapse: separate; 可解。

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。


https://stackoverflow.com/questions/18679020/border-around-tr-element-doesnt-show

https://stackoverflow.com/questions/50361698/border-style-do-not-work-with-sticky-position-element

https://developer.mozilla.org/en-US/docs/Web/CSS/border-collapse

ps: 好像还是不大对，border 在表格中的行为表现太怪了，有些时候，等晚点腾出手了总结一下

pps: tmd，我先伪元素解君愁了。

#碎碎念 #坑 #前端 #移动端适配 #响应式
又是因为没有 iphone 踩坑的每一天，安卓移动端 chrome，我的设备上滚动的时候没意识到 ios 的 safari 滚动的时候可视区域是会变化的（讲真这个逻辑我看着挺别扭的，在一些滚动驱动的网站里），用 ipad 侧拉出来模拟了一下然后发现 md，心情美丽///
之前就因为类似的问题把 vh 换成 dvh，又因为 dvh 出了问题换成了lvh 🤔
有什么更好更优雅的办法吗（对于 gsap 滚动驱动的网站）

ps: 好像也不能说是因为 ios 踩坑，有这种行为的浏览器还挺有挺多的，下拉变化可视区域隐藏工具栏，比如小米的系统自带浏览器、firefox，我常用的 chrome 和 kiwi 没有
pps: 找了安卓和 ios 好几个浏览器对比，感觉还是 safari 的影响范围最大。

https://stackoverflow.com/questions/68094609/ios-15-safari-floating-address-bar

掉落邀请码：H8mjgx1Rkw
之后我要减少发邀请码的频率去 follow 打赏一些创造者了喵~要是实在想要的在频道评论区问我吧~