手机网站建设cz35,淘客招商网站选品库建设,重庆最新消息今天封城了,商务网站开发代码2019独角兽企业重金招聘Python工程师标准 前言 今年十月份#xff0c;我曾发布一篇文章《Chrome53 最新版惊现无厘头卡死 BUG#xff01;》#xff0c;不过那个BUG在最新的 Chrome 54 中已经修正。 而今天即将发布的Chrome弱智BUG#xff1a; 仅 Chrome 53 -… 2019独角兽企业重金招聘Python工程师标准 前言 今年十月份我曾发布一篇文章《Chrome53 最新版惊现无厘头卡死 BUG》不过那个BUG在最新的 Chrome 54 中已经修正。 而今天即将发布的Chrome弱智BUG 仅 Chrome 53 - Chrome 552016-12-05发布的中存在问题国内双核浏览器 Chrome 45 中没有问题FirefoxEdgeIE11-IE8浏览器中都没有问题 发现问题 最近在和客户沟通中发现一个奇怪问题 1. 页面中存在一个选项卡控件选项卡里面是IFrame页面初始显示时有纵向滚动条出现 2. 来回切换选项卡一次原来选项卡页面的滚动条居然消失了 3. 奇怪的时此时在选项卡页面内滑动鼠标滚轮还是能够上下滚动页面的 页面打开时的样子 来回切换一次选项卡后的样子 奇怪的是此时鼠标滚动还能上下滚动页面 当然首先怀疑的就是自己写的代码问题但是查了一遍居然毫无头绪。在此期间我们还发现如下问题 1. FineUIPro从最新版v3.3到之前v3.2v3.1v3.0.... 无一例外都有这个问题。这就有点不可思议了我们开源版有 1300 多位捐赠用户专业版有 100 多个企业客户如此明显的一个BUG不可能这么多版本都没有被发现 假设之前的版本根本就没有这个问题那么就是浏览器版本升级引入的BUG了。 2. 在FirefoxEdgeIE11IE10IE9IE8下测试都没有这个问题只有Chrome下才出现问题 由于我们不得不怀疑是新版 Chrome 引入的BUG为了验证这个想法我们需要一个非常简单的可重现例子。 验证问题 由于FineUIPro本身的客户端代码还是很复杂了为了避免其他代码的影响我们需要一个可重现的简单的例子 页面一 !DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodyinput typebutton value页面二 οnclickdocument.getElementById(frame1).style.display block; document.getElementById(frame2).style.display none; /input typebutton value页面三 οnclickdocument.getElementById(frame1).style.display none; document.getElementById(frame2).style.display block; /div styleborder:solid 1px red;width:400px;height:200px;iframe idframe1 stylewidth:100%;height:100%;border:none; src./page2.html/iframeiframe idframe2 stylewidth:100%;height:100%;border:none;display:none; src./page3.html/iframe/div
/body
/html 这个页面代码非常简单两个按钮两个IFrame默认显示第一个IFrame通过按钮来切换两个IFrame的显示。 页面二 !DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodypage2
/body
/html 页面三 !DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodypage3br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /br /page3
/body
/html 下面分别在不同浏览器下运行效果 Chrome 55.0.2883.75 FireFox 50.0.2 Edge IE11 毫无疑问这个是Chrome的BUG那么到底是从哪个版本开始才出现的呢这个就不好追踪。 我们也没有那么多精力把每个Chrome版本都测试下所以就安装了两款国内的双核浏览器分别用Chrome内核测试 第一款产品是 360安全浏览器极速模式下 Chrome 版本是 45比较老正好用来测试 哈哈看来 Chrome v45 还没有这个BUG这就好办说明这个BUG是Chrome新版才引入的 第二款产品是 QQ 浏览器Chrome内核是 53 看来 Chrome 53 版本已经引入了这个BUG。 所以我们可以大致把引入这个BUG的Chrome版本限定在 v53 - v55这个是2016-12-05 才发布的。 解决问题 既然那么多Chrome版本都存在这个问题要么是Google开发人员没发现要么是不想修正了。 这里也顺便吐槽一下Chrome虽然Chrome的运行速度最快开发工具也非常方便但是长期坚持在JavaScript编码第一线居然发现了好多个仅在Chrome下出现的问题让人恍惚有点IE6的感觉。仅仅是在 FineUIPro 就有好几处是 Chrome Only 的代码有空我会再分享几个出来。 不管Google怎么办这个问题还是要解决又要是 Chrome Only 的代码了哎 1. 首先怀疑是 iframe 的 width:100% 和 height:100% 搞的鬼 由于代码结构太简单没有多少让人怀疑的地方就先把这个宽度和高度改为固定值试下 页面四 !DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodyinput typebutton value页面二 οnclickdocument.getElementById(frame1).style.display block; document.getElementById(frame2).style.display none; /input typebutton value页面三 οnclickdocument.getElementById(frame1).style.display none; document.getElementById(frame2).style.display block; /div styleborder:solid 1px red;width:400px;height:200px;iframe idframe1 stylewidth:400px;height:200px;border:none; src./page2.html/iframeiframe idframe2 stylewidth:400px;height:200px;border:none;display:none; src./page3.html/iframe/div
/body
/html 运行一下问题依旧 这时如果用Chrome调试工具查看发现滚动条的位置还在只是不显示 2. 之前遇到类似的问题我们可以强制浏览器重新渲染 网络上早已有相应的解决版本查看StackOverflow上相关的技术帖子 页面五 !DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodyscriptfunction fixSize() {var container1 document.getElementById(container1);container1.style.overflow hidden;container1.scrollWidth;container1.style.overflow auto;}/scriptinput typebutton value页面二 οnclickdocument.getElementById(frame1).style.display block; document.getElementById(frame2).style.display none; fixSize(); /input typebutton value页面三 οnclickdocument.getElementById(frame1).style.display none; document.getElementById(frame2).style.display block; fixSize(); /div styleborder:solid 1px red;width:400px;height:200px; idcontainer1iframe idframe1 stylewidth:400px;height:200px;border:none; src./page2.html/iframeiframe idframe2 stylewidth:400px;height:200px;border:none;display:none; src./page3.html/iframe/div
/body
/html 运行问题依旧 怪了这个强制Chrome重新渲染的代码之前验证过的这次居然也不行了。 郁闷中。。。。。先出去散步。。。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 散步中。。。。 3. 散步回来觉得还是应该从强制Chrome渲染入手这次我们来改变高度 页面六 !DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodyscriptfunction fixSize() {var container1 document.getElementById(container1);container1.style.height 199px;container1.scrollWidth;container1.style.height 200px;}/scriptinput typebutton value页面二 οnclickdocument.getElementById(frame1).style.display block; document.getElementById(frame2).style.display none; fixSize(); /input typebutton value页面三 οnclickdocument.getElementById(frame1).style.display none; document.getElementById(frame2).style.display block; fixSize(); /div styleborder:solid 1px red;width:400px;height:200px; idcontainer1iframe idframe1 stylewidth:100%;height:100%;border:none; src./page2.html/iframeiframe idframe2 stylewidth:100%;height:100%;border:none;display:none; src./page3.html/iframe/div
/body
/html 帅呆了这次居然可以了现在Chrome 55下能正常运行了。 4. 优化一下可以改变iframe的高度而不是外部容器的高度这样就不用硬编码了代码更通用 页面七 !DOCTYPE html
html
headmeta http-equivContent-Type contenttext/html; charsetutf-8 /title/title
/head
bodyscriptfunction fixSize(iframeId) {var iframe document.getElementById(iframeId);iframe.style.height 99%;iframe.scrollWidth;iframe.style.height 100%;}/scriptinput typebutton value页面二 οnclickdocument.getElementById(frame1).style.display block; document.getElementById(frame2).style.display none; fixSize(frame1); /input typebutton value页面三 οnclickdocument.getElementById(frame1).style.display none; document.getElementById(frame2).style.display block; fixSize(frame2); /div styleborder:solid 1px red;width:400px;height:200px; idcontainer1iframe idframe1 stylewidth:100%;height:100%;border:none; src./page2.html/iframeiframe idframe2 stylewidth:100%;height:100%;border:none;display:none; src./page3.html/iframe/div
/body
/html 这样也行也算是解决了这个Chrome Only的BUG 后记 每次给老婆说起这样的稀奇古怪事老婆都会嘲笑我是代码泥瓦匠只能从外部修修补补。不过能修补上也算是阿弥陀佛了。 谁让咱一直坚持在代码一线呢。 在线演示 页面一原始页面Chrome下存在BUGhttp://fineui.com/demo_pro/chromebug1/page1.html 页面四仍然有问题http://fineui.com/demo_pro/chromebug1/page4.html 页面五仍然有问题http://fineui.com/demo_pro/chromebug1/page5.html 页面六修正了Chrome下的问题http://fineui.com/demo_pro/chromebug1/page6.html 页面七修正了Chrome下的问题http://fineui.com/demo_pro/chromebug1/page7.html 转载于:https://my.oschina.net/iamsanshi/blog/801252
