一.IOS自带safari浏览器 1.safari不支持fixed.input输入框 iOS下的 Fixed + Input 调用键盘的时候fixed无效问题 拖动页面时 header 和 footer 已经定位在了对应的位置,目测没问题了 但接下来问题就来了!如果底部输入框软键盘被唤起以后,再次滑动页面,就会看到如下图所示: 我们看到 fixed 定位好的元素跟随页面滚动了起来… fixed 属性失效了! 这是为什么呢?简单解释下: > 软键盘唤起后,页面的 fixed 元素将失效(即无法浮动

白驹过隙,时光荏苒 大概去年这个时候写了angular 结合webpack的一套前端方案,今年此时祭出vue2结合webpack的一套前端方案. 明年的这个时候我又是在做什么... 读在最前面: 1.本文讲述Vue,Webpack 模块化.SEO优化(Vue SSR 服务端同构直出).全浏览器兼容(ie8以上).图片轮播等案例方案        2.技术点:vue.webpack.es6.vue-server-renderer.sass.autoprefixer.vue-meta.axios 3

一.微信小程序 易出Bug的点: 小程序的分享转发功能 背景:小程序项目开发基本完毕也都已经测过几轮,功能上基本没有什么问题,但是上线后却被客户发现通过分享转发小程序给别人,别人无法正常打开的情况 原因: 基本功能已经经过完整的测试,但是却遗漏了这个转发功能的测试 小程序分享转发是常用功能,忽略了从用户角度的操作 与其他小程序对比,小程序的菜单中有些有转发功能有些没有 小程序的页面连续的上滑和下滑 背景:小程序在体验版上已经随开发进度测试完毕,但是在客户现场的正式版上却发现做连续上滑和下滑的操作

“我胡汉三又回来了”,好久没出现在博客园了,准备考试什么的最烦躁了,今天又重新整了下我的Ubuntu,结果发现了一个Chrome浏览器的Bug,但是与其说它是个Bug,还不如说它是个Joke. 好吧,原谅我有电脑洁癖,尤其是对于-目录的洁癖,今天偶然发现-目录下多了一个名为“libpeerconnection.log”的文件,起初不以为意,虽然不知道是怎么生成的,但是打开一看,什么内容都没有,也就安安心心地删了.删的时候就有种预感,这玩意不会又偷偷自己生成吧.果不其然,不管我怎么删,重启电脑后,

IE6浏览器的bug问题及相关解决的方法 1.css浮动边距加倍错误(双倍边距BUG)的解决办法   该错误只影响ie而不影响其他浏览器,我们可以考虑用hack来解决!!!   解决方法:_display:inline; 2.扩展框问题  原因:无法将内容放入固定宽度或固定高度的框中,则框会扩展以适应内容,而不是让内容溢出框外.解决方法:overflow: hidden 3.png图片的问题,   IE6一下版本不支持png图片的格式: 4.三像素文本慢移   Ie6里面的banner部分折成三

web前端工程师在移动互联网时代里的地位问题 支付宝十周年推出了一个新产品:支付宝的十年账单,我也赶个时髦查看了一下我的支付宝十年账单,哎,感慨自己真是太屌丝了,不过这只是说明我使用淘宝少了,当我大规模网上购物时候,我很讨厌慢速的快递,所以我大部分消费都贡献给了像京东这样具有火箭般快递速度的电子商城了.不过在支付宝十年账单里,有个统计数据引起了我的危机意识,在中国一些偏远或者是经济欠发达的省份,电子购物在居民的全部消费里的占比比发达地区高多了,而这个的助推剂居然是移动互联网在中国的普及,在中国使

我们写测试用例的目的是为了能够整理思路,把要测试的地方列出来,做为知识的积淀,用例可以交给其他测试人员执行,或者是跟需求提出者进行讨论,对用例进行补充和修改. 理论上用例写的越多,越容易发现bug.但是,本文我们将讨论如何写出发现不了bug的测试用例. 不看需求 要想写出测不出bug的用例,最关键的一点就是不看需求或者随便看看需求. 需求文档是个磨人的小妖精,要么是写的看不懂,要么写的太简单.这玩意很多时候我们是看不懂的,看不懂的话,嗯,那么就脑补咯,用例写的又快又好,执行的时候肯定发现不了bu

h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为ES5的语法.

我们写测试用例的目的是为了能够整理思路,把要测试的地方列出来,做为知识的积淀,用例可以交给其他测试人员执行,或者是跟需求提出者进行讨论,对用例进行补充和修改.那么为啥你写的用例测不出Bug来呢,真的是没有Bug吗?下面看看你的用例是不是犯了下面的几个错误. 不看需求 要想写出测不出bug的用例,最关键的一点就是不看需求或者随便看看需求. 需求文档是个磨人的小妖精,要么是写的看不懂,要么写的太简单.这玩意很多时候我们是看不懂的,看不懂的话,嗯,那么就脑补咯,用例写的又快又好,执行的时候肯定发现不了

认识hasLayout--IE浏览器css bug的一大罪恶根源 转 什么是hasLayout?hasLayout是IE特有的一个属性.很多的ie下的css bug都与其息息相关.在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容.当一个元素的hasLayout属性值为true时,它负责对自己和可能的子孙元素进行尺寸计算和定位.虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作.  下列元素默认 hasLay

直接上代码了,可以监听微信端,手机端,iOS端的浏览器返回事件,关闭事件不支持 当进入该页面,我们就给这个history压入一个本地的连接.当点击返回.后退及上一页的操作时,就进行监听,在监听代码中实现自己操作 window.addEventListener("popstate", function(e) { alert("我监听到了浏览器的返回按钮事件啦");//根据自己的需求实现自己的功能 }, false); 虽然我们监听到了后退事件,但是页面还是会返回上一个

摘要: Source Map还是很神奇的. 原文:线上出bug了?别怕,这么定位! 公众号:前端小苑 Fundebug经授权转载并修改,版权归原作者所有. 工作中,生产环境代码是编译后代码,搜集到报错信息的行和列无法在源码中对应,很多时候只能靠"经验"去猜,本文针对这种情况,开发了一个npm命令行小工具,帮助快速定位报错的源码位置,提升效率. 由于现在构建工具盛行,前端部署的代码都是经过编译,压缩后的,于是乎,SoueceMap就扮演了一个十分重要的角色,用来作为源代码和编译代码之间的

var _ = require('lodash'); var request = require("request"); /* @LM 2017-02-16 node端代理浏览器路由 解决浏览器跨域问题 demo: router.post('/proxy_http',proxy_routes); condition = { url:'',//接口地址 (必填) method:''//接口方式 (看接口需求) host:'',// form:{} post请求参数 } */ export

移动端click点透bug click点透bug有一个特定的产生情况: 当上层元素是tap事件,且tap后消失,下层元素是click事件.这个时候,tap上层元素的时候就会触发下层元素的click事件 click点透 以下情况,在B元素上有半透明灰色色遮盖层C,黄色B元素内有可点击链接A 解决方法 上下层都是tap事件,缺点:a标签等元素本身就是自带的click事件,更改为tap比较困难 缓动动画,让上层元素消失的时候不要瞬间消失,而是以动画的形式消失,事件超过300ms就可以了 使用中间层,添

背景 最近处理一个 bug 很有意思,有客户反馈某个配置文件解析失败了,出错的那行的内容就只有一个字母 a. 最开始以为是谁改动了处理的脚本,但要到了问题代码中的脚本,比较发现跟库上是一样的. 又经过一番查找,才发现原来是脚本中的一行 echo 引入的. 问题代码 出问题的那行 bash 脚本是这样, echo 一个字符串到某配置文件中. echo [partition] >> xxx.config 这行平平无奇的代码在大多数人的环境下,确实是正常运行的,但某些情况下会出 bug,那就是当运行

前言 前几天跟读者聊天,他说被产品经理给怼了.原因是线上出 Bug 了,最后是客户反馈才知道的. 我就问他:你们是不是没做监控? 读者:我们是刚成立的创业团队,目前最重要的就是堆功能,很多基础设施都没时间做. 正所谓有多大的碗吃多少的饭,不要盲目追求规模大,很牛的那种方案,合适的就可以.监控亦是如此,小方案只要够用,能解决问题,也是非常不错的选择. 下面给大家介绍一些常用的异常监控方式: 最小成本化 如果是刚成立的创业团队,可以用最小的实现成本来对系统的异常进行实时监控.所谓最小的实现成本,就是

1 前言 欢迎访问南瓜慢说 www.pkslow.com获取更多精彩文章! 出Bug表 南瓜言:先司创业未半而中道破产,今培训造才,网课套钱,此诚百家争鸣之时也.然优秀骨干组队离职,新招小白乐于摸鱼者,盖恨先司之压榨,欲报之于后司也.诚宜混水摸鱼,以光先司遗风,恢弘偷懒之气,不宜勤奋加班,积极上进,以塞破产之路也. 开发测试,俱为一体.写Bug测Bug,不宜异同. 若有认真仔细及为规范者,宜贴代码鄙视孤立.以示老板庸笨之能,不宜偏才,使内外异心也. 架构.运维锅有之.废亿.懂云等,此皆凉凉,思维

解决方案:在form表单加入 autocomplete="off".

Bugs及解决方案列表(以下实例默认运行环境都为Standard mode): 如何在IE6及更早浏览器中定义小高度的容器? 方法: #test{overflow:hidden;height:1px;font-size:0;line-height:0;}IE6及更早浏览器之所以无法直接定义较小高度的容器是因为默认会有行高 如何解决IE6及更早浏览器浮动时产生双倍边距的BUG? 方法: #test{display:inline;}当在IE6及更早浏览器中出现浮动后margin值解析为双倍的情况,设

概念:所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码解析的差异,造成页面显示效果不统一的情况. 1>不同浏览器的标签默认的外补丁和内补丁不同问题症状:随便写几个标签,不加样式控制的情况下,各自的margin 和padding差异较大.解决方案:css里 *{margin:0;padding:0;} 2>块属性标签同时设置了横向margin值和float属性后,在ie6显示的横向margin比设置的大一倍问题症状:常见症状是ie6中后面的一块被顶到下一行碰到频率:90%(稍微复杂点的页