谷歌低版本浏览器 antd Modal 导致卡顿

2024-10-28

解决Vue3使用 Ant Design，出现多个Modal，全是黑屏，导致列表页看不见问题！

尴尬问题不报错,但是我看着就难受. 求知路上请教了下强哥,强哥告诉我可能某个样式属性失效引起(无效),建议我F12看下样式. 接着,我F12狂看元素样式,查了一个小时未果,我真抓狂了. 都想明天问同事了,但我感觉自己能行,就又坚持了一下. 结果,在摸索过程中,不断在控制台尝试,打印dom对象及属性,一查就知道了,原来点击新增,编辑按钮,每次都能弹出5个对话框. 锁定问题定位到问题就好办了,然后就是查解决方案的过程了. 偶然在CSDN上的评论区看到这样一个的答案,完美解决了我的问题,如下图:

webpack 兼容低版本浏览器，转换ES6 ES7语法

ES6,ES7真的太棒了,async +await+Promise,让我阅读代码的时候不用再从左拉到右了(异步太多,一层套一层真的太头痛) 但是有个问题,打包后低版本浏览器运行不了,还有我用了一些混淆插件,不能解析es6的语法,导致混淆打包报错. 进入正题:ES6转ES5 1.安装依赖模块 npm install babel-polyfill --save-dev npm install babel-preset-es2015-ie --save-dev npm install babel-pr

React+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

虽然过了兼容IE6的噩梦时代,IE依旧阴魂不散,因为你可能还要兼容IE9.在ES6已经普及的今天,用ES6写react已经成了标配.但是babel编译的js语法,由于某些不规范的写法,可能在IE9下不能正确解释,很容易导致白屏.本文记录如下起因在准备提测的那天,顺便打开IE9看一眼(注意,这里是原生IE9 ,不是用IE11模拟的IE9),OMG! 排查后发现,原来是因为构造函数中使用了this.简写如下 class Child extends React.Component { cons

AngularJS开发指南7：AngularJS本地化，国际化，以及兼容IE低版本浏览器

AngularJS本地化,国际化国际化,简写为i18n,指的是使产品快速适应不同语言和文化. 本地化,简称l10n,是指使产品在特定文化和语言市场中可用. 对开发者来说,国际化一个应用意味着将所有的文字和其他因地区而异的数据从应用中抽离出来. 本地化意味着为这些抽离的数据和文字提供翻译和转变成本地的格式. 目前,AngularJS支持日期,数字和货币的国际化和本地化. 另外,AngularJS还通过ngPluralize指令支持本地多元化. 所有的AngularJS本地化组件都依赖于$loca

使用html5兼容低版本浏览器

因为html5 新出的一些语义化的标签,在低版本浏览器下不能识别,举个例子,比如你写了一个 header 标签中,写了一段文本,在低版本浏览器下,肯定是能看到的,但是,那是他是不认识 header标签的,只是展示的内容而已,如果你给header添加一个样式,肯定是不可以的,我们要解决的就是让低版本的浏览器认识并解析我们的html5标签. 别人的解决方法,我copy过来了,是自己经过测试的. 第一种方法: <!--[if lt IE 9]> <script src="http:/

低版本浏览器支持HTML5标签的方法

最近刷了一道面试题,是关于低版本浏览器支持HTM5标签的写法,在网上找了一些,都行之有效,但是缺少整体总结,所以在这里总结一下,方便其他人过来阅读. IE低版本需要支持HTML5标签: 方法1.传统引入js包  注:js包(html5.js)内容: // html5shiv MIT @rem remysharp

webpack4与babel配合使es6代码可运行于低版本浏览器

使用es6+新语法编写代码,可是不能运行于低版本浏览器,需要将语法转换成es5的.那就借助babel7转换,再加上webpack打包,实现代码的转换. 转换包括两部分:语法和API let.const这些是新语法. new promise()等这些是新API. 简单代码类库 utils.js const name = 'weiqinl' let year = new Date().getFullYear() export { name, year } index.js import _ fro

jQuery效果之封装模拟placeholder效果，让低版本浏览器也支持

页面中的输入框默认的提示文字一般使用placeholder属性就可以了,即: <input type="text" name="username" placeholder="请输入用户名" value="" id="username"/> 最多加点样式控制下默认文字的颜色 input::-webkit-input-placeholder{color:#AAAAAA;} 但是在低版本的浏览器却不支

轮播图采用js、jquery实现无缝滚动和非无缝滚动的四种案例实现，兼容ie低版本浏览器

项目源代码下载地址:轮播图以下为项目实现效果:(由于gif太大,所以只上传一张图片,但效果完全能实现,经测试,在ie各版本浏览器及chrome,firefox等浏览器中均能实现效果,可以实现点击切换图片,无缝滚动和非无缝滚动两种效果) 页面源代码:index.html(以下注释自行切换,为了项目清晰,所以用了四个js文件,分别实现不同的效果) <!DOCTYPE html> <html lang="zh-CN"> <head> <meta c

string转object-兼容低版本浏览器（eval实现）

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>string转object-兼容低版本浏览器(eval实现)</title> </head> <body> <p style="white-space: pre-line; font-size: 18px;"> ie8(兼容模式),ie7和i

Vue2+Webpack+ES6 兼容低版本浏览器（IE9）解决方案

Vue2+Webpack+ES6 兼容低版本浏览器(IE9)解决方案解决方式:安装 "babel-polyfill" 即可. 命令:npm install --save-dev babel-polyfill 在入口main.js文件引入:import 'babel-polyfill' 最后一步,在build文件夹下找到webpack.base.conf.js.修改入口方式: entry: {app: ["babel-polyfill", "./src/m

WebSocket兼容到低版本浏览器

就目前而言,WebSocket是最好的Web通信解决方案了.但是IE从10才开始兼容它,对于目前大量IE8存在的市场,原生的WebSocket显然不太实用,我们需要低版本兼容的解决方案.于是我模拟WebSocket在浏览器上的行为,用AS3写了个兼容的版本. 内容有点多,这篇只把演示给搞定,至于AS的源码就丢到下一篇了.下面是效果图: 演示下载地址: WebSocket兼容到低版本浏览器(演示实例) 页面代码比较简单,用法和正常的WebSocket基本一样,只是引用了WebSocket.js这个

HTML data属性简介以及低版本浏览器兼容算法

实例使用 data-* 属性来嵌入自定义数据: <ul> <li data-animal-type="bird">Owl</li> <li data-animal-type="fish">Salmon</li> <li data-animal-type="spider">Tarantula</li> </ul> 浏览器支持 IE Firefox Ch

解决html5新标签【placeholder】低版本浏览器下不兼容问题

placeholder属性是HTML5 中为input添加的.在input上提供一个占位符,文字形式展示输入字段预期值的提示信息(hint),该字段会在输入为空时显示. 实例:1 <input type="text" name="userName" placeholder="请输入用户名"> placeholder操作起来非常方便,提高了开发效率,同时在高版本浏览器中用户体验也很好,所以本人很喜欢用这个属性. 然而,在IE9以下版本浏

OAF与Windows 7版本不兼容黑屏卡顿问题

OAF版本比较原始,在Window7中无法应用配色方案,导致黑屏卡顿问题.(在启动OC4J后,Window7的配色方案还是会还原至原始状态) 修改$JDEV_HOME/jdev/bin/jdev.conf 找到下面内容,把最后一行前面的#号去掉: # Disable Direct Draw, on some Windows 2000/XP base computers, # Direct Draw is cause excessive screen refreshes and slows dow

Explorer内存占用偶尔变高导致卡顿

症状: 打开 "这台电脑",加载缓慢.此时查看任务管理器,explorer内存可能飙升到几G.cpu也很高创建和删除文件缓慢,删除单个文件也会出现进度条.此时查看任务管理器,会出现瞬间的内存飙升(1-3G左右),导致的短暂卡顿. 解决方法: 删除文件 %APPDATA%\Microsoft\Windows\Recent\AutomaticDestinations\f01b4d95cf55d32a.automaticDestinations-ms 问题解决了,不过找问题的方法还是更重要

解决texlive化学式转换镜像经常偶发性进程堆积导致卡顿问题

前言之前在使用Python定时清理运行超时的pdflatex僵尸进程博文中我采用python脚本开启定时任务清理pdflatex僵尸进程,线上4u2G的k8s pod部署了3个,pdflatex执行过程是是比较耗cpu的,内存占用微乎其微,但是pod在实际在运行中偶尔还是会出现一些问题问题问题一:K8s POD存储超过100M,POD down了,但是资源没有被回收,导致k8s命名空间资源被空耗问题二:每隔一段时间偶发性单个pod进程积压,定时清理脚本会down掉,清理任务无法正常运

判断IE浏览器的类型以及提示信息（低版本浏览器不予显示）

//浏览器IE版本判断(function(window) { var theUA = window.navigator.userAgent.toLowerCase(); if ((theUA.match(/msie\s\d+/) && theUA.match(/msie\s\d+/)[0]) || (theUA.match(/trident\s?\d+/) && theUA.match(/trident\s?\d+/)[0])) { var ieV

项目在低版本浏览器下不兼容？友情提示客户升级浏览器（以下只针对IE浏览器）

(function (window) { var win = window, sys = {}, ua = navigator.userAgent.toLowerCase(); (/msie\s+(\d+)/.test(ua)) ? sys.ie = RegExp.$1 : (/firefox\/(\d+)/.test(ua)) ? sys.firefox = RegExp.$1 : (/chrome\/(\d+)/.test(ua)) ? sys.chrome = RegExp.$1 : (/

vue iview Select bug，在低版本浏览器中报错

iview是个好东西,今天第一次试用,用来做了一个app,但是在安卓5.1各种报错啊,头痛的是不知道具体哪行代码错了,总是报错undefined is not a function. 倒腾了半天,原来是iview的select中用了Array.find.array.findIndex方法.原来浏览器版本低了,不兼容这些JavaScript特性.果断的给打上补丁就好了 if(typeof Array.includes == 'undefined'){ Array.prototype.include

解决backgroud:transparent在低版本浏览器中的bug

今天在html页面上定义了一个button和一个div,大小相同,button使用绝对定位,覆盖在div上面一层,同时样式设置背景透明(background:transparent). 这样就可以在看到div层的同时,点击div区域其实是点击了button. 主流浏览器都可以正常运行. 但是ie8和360.世界之窗等一些小众浏览器的兼容模式下div会把button给挡住(可能因为我div中放的是flash的原因),导致无法点击到button. 设置z-index也没有用, 实验了多次后,终于找到

谷歌低版本浏览器 antd Modal 导致卡顿

热门专题