首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Angular CDK虚拟滚动-表格中的文本在IE11中模糊

Angular CDK虚拟滚动是Angular的一个组件开发工具包(Component Dev Kit),它提供了一些可重用的组件和指令,用于构建丰富的Web应用程序。

虚拟滚动是一种优化技术,用于处理大量数据的滚动列表。在传统的滚动列表中,所有的数据都会被渲染到DOM中,这会导致性能问题,特别是在处理大量数据时。虚拟滚动通过只渲染可见区域的数据,大大提高了性能和用户体验。

在IE11中,由于其对现代Web技术的支持有限,虚拟滚动中的文本可能会出现模糊的情况。这是因为IE11对于一些CSS属性和渲染机制的支持不完善。

为了解决这个问题,可以尝试以下方法:

  1. 使用更清晰的字体:选择一种在IE11中显示效果较好的字体,例如Arial或Tahoma。
  2. 调整字体大小:尝试增大或减小文本的字体大小,以找到在IE11中显示效果较好的大小。
  3. 禁用硬件加速:在某些情况下,禁用硬件加速可以改善在IE11中的文本模糊问题。可以通过在CSS中设置transform: translate3d(0,0,0)来禁用硬件加速。
  4. 使用其他滚动库:如果虚拟滚动在IE11中仍然存在问题,可以考虑使用其他滚动库或插件,例如ngx-perfect-scrollbar或jQuery的滚动插件。

总之,虚拟滚动是一种优化技术,用于处理大量数据的滚动列表。在IE11中,由于其对现代Web技术的支持有限,虚拟滚动中的文本可能会出现模糊的情况。可以通过选择合适的字体、调整字体大小、禁用硬件加速或使用其他滚动库来解决这个问题。

腾讯云相关产品和产品介绍链接地址:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Angular 11正式发布:加入webpack 5,升级至TS 4.0,不再支持IE 9 和10

在此过程,我们解决了路由器和表格一些热门问题: https://github.com/angular/angular/issues/13011 https://github.com/angular...有关这些 API 和其他新特性更多细节和示例,请务必查看 Angular Material Test Harnesses 文档: http://material.angular.io/cdk/test-harnesses...输入表单数据以及滚动位置都会保持原样,从而提高了开发人员工作效率。 更快构建 通过对一些关键领域所做更新,我们带来了更快开发和构建周期。...这意味着将来版本,linting Angular 项目的默认实现会不可用。...IE11Angular 还在支持唯一 IE 版本。我们还移除了一些已弃用 API,并在弃用列表添加了一些项目。

3.3K30

移除 View Engine 转用 Ivy,盘点Angular 12重要更新

Angular CDKAngular Material 共同开放新 Sass API 接口,可供您通过新 @use 语法进行使用。...默认情况下,CLI 将启用严格模式以捕捉开发早期各种错误。 Webpack 5 模块捆绑器现已实现生产就绪。 不再支持 IE11 浏览器。 对于编译器,新版本提供转换组件样式资源支持能力。...这项功能可帮助用户针对各项请求 HTTP 客户端配置拦截器。 动画方面,当用户删除 root 视图时,现在可以正确删除其中 DOM 元素。这是一项重大变化。...表单,引入最小与最大值验证器。 新版本可导出 HTTP 状态码列表。 向 Angular 语言服务添加一项功能,允许用户直接访问使用模板文件组件实际位置。...新增诊断提示将建议您开启 strictTemplates,借此语言服务获得检索编译器选项诊断程序方法。

4.4K10

angular浏览器兼容性问题解决方案

important; 谷歌、火狐及-webkit-内核浏览器均支持该属性(css3),IE不支持该属性,所以IE,会自动降级,表格无固定列,可滑动形式。...Edge浏览器1703之后版本使用了chromium内核,对css3属性支持较好,也支持sticky属性,可以使用,可以固定表格列,但边框会消失。...第二个方案详细过程如下: 使用div包裹表格,当表格宽度超过div宽度时,开启滚动: .scroll-table { width: 100%; overflow-x: scroll; } 针对表格...,非常简单,将表格一列设置成绝对定位,设置了绝对定位后,该列会脱离原来文档流,表格少了一列,所以需要加一个背景板来保证表格能够给这个固定列留出一个位置。...,插件需要自己添加到项目文件(根据angular团队所说,这个插件修复了一个IE10或者IE11bug,但是提交了太多代码,这会给增加现有的应用打包体积,虽然后面关于这个PR讨论了挺久,但是看样子是准备把这个放到

3K30

Angular Material 设计之美

不会让开发人员感到困惑简单 API。 各种各样没有 bug 用例按预期行事。 通过单元测试和集成测试更好地测试行为。 可在 Material Design 规范范围内进行定制。...除了常用组件之外,Angular Material 还有一个组件开发包 CDK设计界有一句名言“少即是多”,苹果产品就是最好证明。...我以前写 helper 库 时候,曾写过颜色集群,文本色处理都是一刀切,非常不严谨,所以感触非常深。更惊喜Angular Material 甚至给出了灰色值别名。...我写了大量表格需求之后,我可以很肯定地说 Angular Material 表格足以应对复杂需求(话也不敢说太满?)。...mat-table 对表格列宽首选操控方式是 CSS,起初我对这种方式也存在疑虑,但是我亲自封装了 ng-zorro-antd 表格组件之后,我发现一切都很自然。

5K30

Angular 6正式版发布,都有哪些新功能

Angular 5发布半年之后,Angular 6昨天正式发布,那么在这个版本有哪些新功能呢?新版本重点关注工具链以及工具链 Angular 运行速度问题。...除此之外,这次更新还包括框架包(@angular/core、@angular/common、@angular/compiler 等)、Angular CLI、Angular Material + CDK...创建ng add示例如下:Angular Metarial ng add schemetic Angular Elements Angular Elements 第一个版本专注于现有的 Angular...Angular Material + CDK 组件 最值得一提是用于显示分层数据树形控件,遵循数据表组件模式,CDK 包含树核心指令,而 Angular Material 则提供与顶层 Material...目前,@angular/cdk/overlay 软件包是 CDK 最强大基础架构之一,你可以利用他们来构建自己 UI 库。

4.2K20

Angular 结合 rxjs 实现拖拽

这是我参与「掘金日新计划 · 4 月更文挑战」第12天, 在上两篇文章,我们学习了元素必知重要属性和方法和 Angular 自定义 Video 操作,没有度过读者可先了解。...页面 video 标签,当滚动高度超过其位置之后,将其设置为可在可视区域自由拖拽。...一个不错 Idea,如果你使用 Angular @angular/cdk/drag-drop 可以轻松实现,但是我们这里不使用工具。...好吧,我们来分析下实现思路: 页面滚动高度大于视频所在位置:那么就是视频 bottom 值相对可视窗口值要小于0,我们需要设定一个包裹 video 标签 div 方便计算,其高度是原设定 video...移动过程,计算目标元素相对可视窗口左侧和顶部距离,将值赋予到 left 和 top。

86810

Angular Schematics 三部曲之 Add

去年 schematics 发布以来,已经有部分开发者项目中尝试使用,但是学习资料还是比较匮乏。目前官网已经有了 schematics 简易教程,但在实际开发仅靠官方教程还是会遇到很多问题。...官网教程,已经列出了 schematics 目录两种风格: 1、你可以 schematics 文件夹单独安装 node_modules,这样你 package.json 定义 scripts...package.json ,然后执行 npm install,以上代码实际执行了两次 npm install,执行 Add 主逻辑之前,首先安装了 cdk,parse5 等依赖包。...除了代码安装依赖以外,也可以 schematics package.json 定义 cdk、parse5,只要保证执行 Add 主逻辑时候已经安装了上述包即可,但是这种方式过于死板,...文件修改 JSON 文件修改非常简单,比如在 angular.json 添加 hmr 设置。

1.3K10

这几款基于vue3和vite开箱即用后台管理模版,让你yyds!

我们都知道 vue3 已经发布一年多了,相关生态也慢慢建立,很多公司也尝试用 vue3 来开发自己应用系统。...是一款支持 vue3.0,react,angular,typescript 等多框架支持台前端解决方案,ui 使用 antd 实现,它使用了最新前端技术栈,内置了 i18 国际化解决方案,动态路由...下FC模式等 angular angular基本语法,如html模板,指令,组件等 angular全家桶,如angular-cil,Rx等 typescript基本语法 界面展示 大家可以左右滑动来切换图片...它集成了我们业务开发大部分功能,比如文本编辑器,全站搜索,权限管理,可视化图表等。...,今天分享就到这里了,如果大家对可视化搭建或者低代码/零代码感兴趣,也可以 趣谈前端 查阅我往期文章或者评论区交流你想法和心得,欢迎一起探索前端真正技术。

4.1K20

Angular教程】自定义管道

这是我参与8月更文挑战第10天,活动详情查看:8月更文挑战 一、管道作用 方便我们模板对我们数据进行格式化处理。...二、内置常用管道 具体API参照官网查询使用 DatePipe: 格式化日期 UpperCasePipe: 文本转为全部大写 LowerCasePipe: 文本转为全部小写 TitleCasePipe...四、自定义管道三部曲 自定义管道类并实现PipeTransform接口 通过@Pipe装饰器将新建类声明为Angular管道 注入管道,如在app.module.tsdeclarations数组配合新建管道类...五、自定义管道项目实践 背景: 我们最近需要在IE11浏览器上跑我们Angular项目,因为最开始没有考虑IE兼容问题,使得其中最明显一个问题得以暴露,我们列表接口时间列全都了。...我考虑解决方案就是通过自定义管道来对DatePipe扩展,自定义管道中加入判断浏览器环境来对date字符串进行处理。 遗留: 遗留问题就是全局替换风险还是感觉有点高。。。

1.3K20

Hoppscotch:开源 API 开发工具,快捷实用 | 开源日报 No.77

团队协作方面可以创建无限数量团队成员和集合,工作区管理个人或者团队集合环境。 针对效率做了键盘快捷键优化设计。 通过启用代理模式解决 CORS 问题。 国际化体验更好地满足用户需求。...该项目主要功能包括: 安全存储:可将任意键/值类型密钥存储 Vault ,并对其进行加密后再写入持久化存储介质,以确保即使获取原始数据也无法直接获得其中保存着机敏信息。...数据加密:Vault 可以不存储数据情况下对数据进行加密和解密。这允许安全团队自定义加密参数,开发人员可以将加密数据存储 SQL 数据库等位置,而无需设计自己加密方法。...比如特定用户读取所有密钥或特定类型所有密钥。吊销有助于密钥滚动以及入侵时锁定系统。...该项目维护了几个 npm 软件包: @angular/cdk:帮助开发者使用常见交互模式编写自定义 UI 组件库。

32310

Angularui-grid使用详解

Angularui-grid使用   项目开发过程,产品经理往往会提出各种需求,以提高用户体验。最近,项目中用到表格特别多,而且表格列数和行数也超多。...为了让用户浏览更爽,产品经理提出,当表格上下滚动时,表头固定,左右滚动时,表头随动。就这样一个看似十分easy需求,我研究了一周时间,终于给实现了。   ...刚开始我研究bootstrap-table,这个插件可以实现表头固定效果。由于我们项目用angular 开发项目中引入bootstrap-table和其它文件冲突了,所以就放弃了。...随后我又发现了angular-ui-grid,这个插件是angular框架封装好,依赖angular,这个插件功能也是比较多,表头固定,自定义排序,表格行编辑,树形结构等多种用法。   ...依赖angular版本<=项目中angular版本 二、引入文件 ?

2.1K20

Angular 6新特性介绍

通过ng add可以更加容易向项目中添加新功能(类似npm install ) Angular Material+CDK组件 angular6最大补充是用于显示分层数据新树组件。...遵循数据表组件模式,CDK包含核心树指令,而Angular Material则提供与顶层Material Design样式相同体验 Material 运行命令,添加Material ng add...这也就意味着你可以从你应用移除 polyfill,这样可以减少大约47k空间 RxJS v6 Angular已经更新使用了RxJS v6。...RxJS作为一个独立工程已经几周前完成了V6发布 长期支持 (LTS) 我们正在将我们长期支持扩展到所有主要版本。...更新@ angular / cli 更新你Angular框架包 更新其他依赖项 Ivy Ivy将会是下一代渲染引擎,现在正在开发。让我们拭目以待吧。 原文链接

2.3K21

如何使用WijmoJS 纯前端设计器,快速生成 Angular 应用

我们示例,操作是单独选项卡打开设计图面,并使用 Angular标记提供上下文,以及源文件该标记位置。 现在单击链接以相邻选项卡打开设计器。...设计图面上FlexGrid 表格控件以设计模式显示,这意味着您无法直接对其进行滚动,调整大小或以其他方式操作行为,而是使用设计器右侧“属性”窗格来操作控件对象模型。...例如,您可以通过添加适当类型新系列元素,轻松地将趋势线添加到图表“属性”窗格向下滚动,找到系列属性,然后单击“显示项目”按钮将其展开。...单击设计器左侧“源视图”图标以显示生成Angular标记。 从那里,突出显示要复制文本,并使用快捷键(Windows上,Ctrl + C)将文本复制到剪贴板。...在这种情况下,设计器以斜体显示只读文本绑定。 保存操作期间保留绑定事件; 但是,设计器没有用于创建或编辑它们界面。

5.3K40

基因表达可视化工具

下面我们就来简要讲解一下具体使用方法。 1. mRNA mRNA面板,我们输入基因名称CDK1,点击搜索。 GEDS将以图片(以箱线图形式)及表格两种形式显示基因表达谱。...Figure of expression以图片形式显示基因表达谱。主要包括3个方面: (1)CDK1TCGA不同肿瘤类型表达情况 从左至右,以中位数,基因表达量依次降低。...(2)CDK1GTEx正常组织表达情况 (3)CDK1CCLE不同肿瘤细胞系表达情况 我们都知道,一般基因在肿瘤组织与肿瘤细胞系之间表达模式相同,但也有可能会不同。...同时,CCLE数据集中,CDK1mRNA水平在这些组织具有一致表达。 在前列腺癌CDK1TCGA和CCLE之间存在显著差异,表明该基因在前列腺癌组织和细胞系之间表达方式不同。...我们这里检索CDK1。 结果如下,依旧以图片表格两种形式呈现。但是和mRNA结果不同是不包含正常组织表达量,主要包括TCGA、MCLP及CCLE数据库表达情况。

95520

记录工作遇到各种问题(Bug,总结,记录)

表格中有大量数据时,很容易就会出现性能问题 表格ReflowRepaint代价都很高,滚动、对表格项操作时候,经常就卡顿了 优化方案得按实际需求来看 首先可以尝试:尽可能地只处理视窗可见表格项即可...Angular.js(1)ng-repeat过滤空数据, 讨论 中看到有好几种写法 ?...表格表头、首行或首列固定等 表格数据多时,需要有个滚动时把某一信息行列固定效果,方案有两种 ->直接设置该行列position 这是最直接一般表格可以使用,但数据量很多时候,或者表头复杂...数据量大滚动时的卡顿,可以尝试加上will-change: transform来避免重新布局 几万条数据表格中试过,因为每条数据又有一些绑定,导致每次渲染都有卡顿现象,滚动时候一卡一卡 滚动时,...新版Chrome(61以上)Network面板Preview不支持转换返回数据为对象树结构  旧版本中支持,升级之后直接就变为纯文本了 ? 当然,还有bug是暗色主题文本颜色竟然也是黑..

17.9K12

干好这件事,卷死所有同行

缺点:垂直空间占用比较大,表单项多时需增加页面滚动。 左对齐标签 文字左对齐放置输入域左边 优点:文字开头按阅读视线对齐,方便用户快速浏览表单;节约垂直空间。...输入域 用来采集用户数据信息入口,包含了文本录入、选框录入以及文件上传3种录入类型,应尽可能减少用户思考和理解成本,选择合适输入域。...提示信息 根据输入流程将用户输入过程分为输入前、输入、输入后三个阶段,提示信息输入前发生称为引导提示,提示信息输入/后发生叫反馈提示。...新开页面 优势:页面之间相互独立,互补不干扰,可承载东西较多,适合分步骤或者大表单。 劣势:用户焦点丢失,注意力分散(因为系统中大部分操作同一个页面完成)。...表格loading:用表格自带loading属性。 滚动表格宽度过长- 滚动条最好出现在表格,不是页面级别。 弹框过长-滚动条最好出现在弹框,不是页面级别滚动。 避免出现滚动条套娃。

2.5K10

Ng-Matero v15 正式发布

侧边栏导航焦点管理 侧边栏导航聚焦功能是 14.3.0 添加,可能很多人没有注意到这个不显眼功能(使用 TAB 键即可快速切换焦点,按 space 或者 enter 键可以展开收起二级菜单...具体效果如下图所示: 在线体验地址 焦点管理属于 a11y 范畴,使用 Angular Material 可以很轻松完成 a11y 需求,同时 Angular CDK 也有 A11yModule...另外,侧边栏菜单按钮使用语义化标签进行了优化,关于按钮选择可以参考 Angular Material Button 文档说明: Angular Material 使用原生 ...大部分组件都切换到了 MDC 风格,之前这些组件都是 material-experimental 这个库,现在转正了,而之前组件都加上了 legacy- 前缀。...说一下自己感受: 第一次得知 Angular 官方将在 v15 全面迁移 MDC 时,内心还是很抵触,主要是觉得 MDC 很多效果做不如 Angular Material 细腻(比如 form-field

5.5K40

记几处原生JS开发 原

高亮后,IE11非常的卡,无法滚动,按F12查看性能,要2秒多去渲染一屏,这和JS无关了。我以为是元素过多,IE性能太差原因。后来偶然把prism.css文件去掉,结果瞬间显示出来。...先想肯定是阴影或变形引起吧,就把cssshadow去掉,还不行。就一块块去CSS代码。把透明度去掉,就好了!...2、IE11主界面,获取了iframe初始contentWindow后,  如果再往里写入一个新页面,那么这个已经获取window就无效了。...3、获取窗体滚动位置,IE11不支持window.scrollY,需要去其它属性找。...frm得到竟然直接是一个window对象,我个天呀!  chrome,ff, 可不是这样,我还没有去百度原因,不知道有没有什么说法没有。

2.1K20
领券