关于zoom在Windows10自带浏览器Microsoft Edge存在
Closed this issue · 8 comments
在Windows10自带浏览器Microsoft Edge使用zoom可以放大图片，但点击图片以外的地方无法关闭放大效果。提示“阻止关闭”。
谷歌浏览器，虽然出现该提示但可以点击图片以外的地方关闭放到效果。
未改动之前代码为：
Z = function() { if (!Q) return console.log("阻止关闭"); var e, n, t, o; Q = !(S = !0), document.body.style.overflow = "initial", X((e = B[I], n = e.getBoundingClientRect(), t = e.width, o = e.height, { x: n.left - b, y: n.top - b, w: t, h: o })) }
若将其中if (!Q) return console.log("阻止关闭");注释掉，则两个浏览器均可以。
改动后代码为：
Z = function() { //if (!Q) return console.log("阻止关闭"); var e, n, t, o; Q = !(S = !0), document.body.style.overflow = "initial", X((e = B[I], n = e.getBoundingClientRect(), t = e.width, o = e.height, { x: n.left - b, y: n.top - b, w: t, h: o })) }
看了下，具体原因好像是应为打开第一张图的时候，过度动画有问题导致的，我这边排查一下。
看了下，具体原因好像是应为打开第一张图的时候，过度动画有问题导致的，我这边排查一下。
同时使用waterfall与zoom的情况下，Windows10自带浏览器Microsoft Edge浏览器与谷歌浏览器（其他浏览器并未测试），存在以下问题：
1、若先打开第一张时候会出现放大到占据浏览器全屏无法缩小的问题
2、若先打开第二张会出现明显的动画效果，具体为：明显出现放大到占据浏览器全屏，然后缩小到zoom自适应放大大小，整个动画过程耗时远大于正常时间
3、打开除第一张、第二张图之外任意一张图不会出现上述BUG，然后再任意打开第一张或第二张图上述BUG不存在
3、不改动代码，不清除浏览器缓存的前提下，刷新waterfall与zoom同时存在的页面，刷新到一定次数后（次数规律无规则）上述BUG不存在
现改动方法：
第一张图片网页代码改动前代码如下：
<img alt="/blog/static/resource/wallpaper/PC/1.jpg" src="/blog/static/resource/wallpaper/PC/1.jpg" style="display: block;width: 100%; max-width: 100%;">
对上述BUG我将第一张图片img的width: 100%;注释掉，就不会存在上述问题且能够正常使用waterfall与zoom。
第一张图片网页代码改动后代码如下：
<img alt="/blog/static/resource/wallpaper/PC/1.jpg" src="/blog/static/resource/wallpaper/PC/1.jpg" style="display: block;max-width: 100%;">
不清楚你那里图片显示的默认效果，至于你说的第二点：
2、若先打开第二张会出现明显的动画效果，具体为：明显出现放大到占据浏览器全屏，然后缩小到zoom自适应放大大小，整个动画过程耗时远大于正常时间
在结合你给出的width: 100%;，
我觉得这很有可能是正常的，zoom工作方式是以你当前图片的显示大小过度到图片真实大小(如果图片大于了窗口，则会进行缩放)，所以你说的放大到游览器全屏在缩放到zoom自适应大小，或许是因为你图片显示大小就是一个接近全屏大小的效果。
至于点击第一张图时，很有可能导致无法关闭，我这里已经修改了下代码并提交，你可以在试试。
不清楚你那里图片显示的默认效果，至于你说的第二点：
2、若先打开第二张会出现明显的动画效果，具体为：明显出现放大到占据浏览器全屏，然后缩小到zoom自适应放大大小，整个动画过程耗时远大于正常时间
在结合你给出的width: 100%;，
我觉得这很有可能是正常的，zoom工作方式是以你当前图片的显示大小过度到图片真实大小(如果图片大于了窗口，则会进行缩放)，所以你说的放大到游览器全屏在缩放到zoom自适应大小，或许是因为你图片显示大小就是一个接近全屏大小的效果。
至于点击第一张图时，很有可能导致无法关闭，我这里已经修改了下代码并提交，你可以在试试。
同步你更新后上诉bug依然存在，至于点击第一张图无法关闭的bug在Windows10自带浏览器Microsoft Edge依然存在。
存在问题网页：http://tsingsu.gitee.io/blog/wallpaper/
BUG变动：
1、点击第一张图无法关闭的bug在Windows10自带浏览器Microsoft Edge依然存在，但并不是每次都存在偶然存在，且出现"阻止关闭"提示（PS：谷歌浏览器虽然出现提示但依然关闭）。
必定触发BUG条件：
谷歌浏览器
1、打开存在问题网页有概率点击图片不会具有zoom效果
2、谷歌浏览器dak打开存在问题网页，在网页加载完成之前（即网页标签加载指示没停止之前），立即点击第一张图，那么会触发放大到占据浏览器全屏无法缩小的问题
Windows10自带浏览器Microsoft Edge
1、打开存在问题网页有概率点击图片不会具有zoom效果
2、在网页加载完成之前（即网页标签加载指示没停止之前），立即点击第一张图，那么会触发放大到占据浏览器全屏无法缩小的问题
3、大概率出现可以放大图片，但点击图片以外的地方无法关闭放大效果。提示“阻止关闭”。
你的博客也同样存在我描述的问题
存在问题文章：https://miiiku.xyz/2019/09/2019-09-24-10-36-00/
同样存在问题有：
一、谷歌浏览器：
1.1、打开存在问题网页有概率点击图片不会具有zoom效果
1.2、谷歌浏览器打开存在问题网页，在网页加载完成之前（即网页标签加载指示没停止之前），立即点击第一张图，那么会触发放大到占据浏览器全屏无法缩小的问题
二、Windows10自带浏览器Microsoft Edge
2.1、打开存在问题网页有概率点击图片不会具有zoom效果
2.2、在网页加载完成之前（即网页标签加载指示没停止之前），立即点击第一张图，那么会触发放大到占据浏览器全屏无法缩小的问题
2.3、大概率出现可以放大图片，但点击图片以外的地方无法关闭放大效果。提示“阻止关闭”。
调试了一下午。。。
出现这种第一次没有zoom效果，或者不能关闭的问题是因为图片太大，或者DOM过多，造成的页面卡顿。 在第二次点击页面存在缓存所以不会出现这种问题，修改了代码，加入了定时器吧动画任务放到后面去了，在线上测试，大概率在显示一个全新的图片页面，还是会出问题，页面大图过多也会造成动画切换卡顿，后面在想想办法= =。
2、若先打开第二张会出现明显的动画效果，具体为：明显出现放大到占据浏览器全屏，然后缩小到zoom自适应放大大小，整个动画过程耗时远大于正常时间
这个放大在缩小这个问题我偶然复现出来了，已经解决。
下载新的zoom.js并强制刷新游览器在试试。(吐血
调试了一下午。。。
出现这种第一次没有zoom效果，或者不能关闭的问题是因为图片太大，或者DOM过多，造成的页面卡顿。 在第二次点击页面存在缓存所以不会出现这种问题，修改了代码，加入了定时器吧动画任务放到后面去了，在线上测试，大概率在显示一个全新的图片页面，还是会出问题，页面大图过多也会造成动画切换卡顿，后面在想想办法= =。
2、若先打开第二张会出现明显的动画效果，具体为：明显出现放大到占据浏览器全屏，然后缩小到zoom自适应放大大小，整个动画过程耗时远大于正常时间
这个放大在缩小这个问题我偶然复现出来了，已经解决。
下载新的zoom.js并强制刷新游览器在试试。(吐血
上述BUG：第一次没有zoom效果，或者不能关闭的问题是因为图片太大，若先打开第二张会出现明显的动画效果。在我本地现况看来已经解决。
但之前存在的一个功能消失：图片放大后可左右切换功能消失了。
更新一下