U_U的日记 标签: debug
blur filter 动画完成后造成内容被裁剪(显示不全)
2017-03-13 17:46:38
最近在 iOS 10 (iPhone5/iOS 10.2.1)上发现, 使用 CSS filter blur 动画时, 在动画结束以后, 部分内容被裁掉了, 即内容显示不全. 因为在 PC 端没有这个问题, 因此定性为兼容性问题. 遇到这种兼容性问题最好的解决方法就是单独拎出来(撇开其他因素的干扰), 大概分析一下 bug 触发的条件, 再逐步尝试 CSS 属性各个击破. 触发条件 * 动画元素有父子级关系 * 在父级做 blur filter 动画 * 父级 overflo...
跨域页面消息通信的坑与填
2016-08-08 16:34:38
大家可能都听说过 postMessage 可以实现跨域页面互相通信. API 很简单, window.postMessage(), 参数也只有两个, so easy 啊~ 但具体怎么做呢? 没有项目实践还真容易掉坑里. 实践过程中的坑与填 ------------------ * 如何发送消息? * postMessage 时到底是...
微信分享的默认机制
2016-07-13 15:15:33
利用微信分享(分享到朋友圈和分享给朋友)的默认机制(不需要 JSSDK 验证配置也可以控制分享的内容), 我们可以尽量避免出现分享时出现错误的图片 * 分享图标默认为网页中找到的第一个尺寸大于 300 * 300 的非隐藏(不能设置 display:none 或者 visibility:hid... (2回应)
body overflow:hidden 在移动端失效了?
2016-06-03 15:50:53
为什么会突然关注到这个呢, 主要是在项目中发现一个很奇怪的页面, 页面 body 设置了 overflow:hidden, 在 PC 端浏览器中打开页面是无法滚动的. 但在 iPhone5 上打开这个页面, 却可以滚动? 匪夷所思啊~ 于是开始排查代码, 以为是什么地方动态设置了 overflo... (3回应)
解决 html2canvas 截取非视野内元素得到一片空白的问题
2016-05-31 17:42:53
首先科普下 html2canvas, 官方已经解释得很清楚了 > The script allows you to take "screenshots" of webpages or parts of it, directly on the users browser. 我用 html2canvas 来对一些 DOM 元素做快照操作, 然后获取到 canvas 中的像素数据做 base64...
如何解决使用了 Framework7 后图片无法长按保存的问题
2016-05-26 12:07:26
我们期望的行为 :) 然而我们在使用 Framework7 后的行为 :( 开始没有意识到这是由于禁用了 `-webkit-touch-callout` 造成的, 按照常规一步步排查问题 1. 删掉 framework7 的 js 排除 JS 的原因 没有得到我们期望的行为 2. 删掉 framework7 的 css 排除 CSS...
使用 SVG clipPath 裁剪时把自己给坑了
2015-10-22 10:26:59
最近在实现一个可以对图片做不规则裁剪的功能, 其实就相当于蒙板功能. 例如一张图片叠加一个五角星, 要实现只有五角星区域的内容才显示出来. 要实现这样的效果, 基本上只有2条路 * CSS clip-path/mask * SVG clip-path 由于 CSS 实现方式目前的兼容性很不...
爽快地调试nodejs
2015-07-06 17:58:25
how to debug nodejs 由于还没有使用Node.js做过项目, 大多时候只是自己"玩玩"而已. 有需要调试的时候往往就console出来, 虽然效率比较低, 但由于代码很少, 就没有觉得很麻烦. 最近想多玩一下, 还是用老掉牙的console来debug, 发现那样效率真是够了, 果断r...
最熟悉的陌生人 -- Chrome DevTools
2013-08-08 14:29:53
不识庐山真面目, 只缘生在此山中. 如果你没看过Chrome DevTools的文档, 你可能永远也不知道这些, 永远也体会不到DevTools的强大. 你应该熟练使用它来提升自己的工作效率. Keyboard Shortcuts -------------------- h | Hide Element F2 ... (1回应)
远程实时调试手机上的Web页面
2013-07-21 23:02:09
调试前端页面我一直使用着神器Chrome开发人员工具, 那个方便, 大家都懂的. 但当我们要调试为移动设备设计的Web页面时, 是不是觉得有点力不从心了? 平时开发时我们可以一直都是在桌面调试这个页面, 但最终的运行环境是移动设备, 最终还是要在手机上验证一下... (27回应)