Google开发者大会每年都会提出有关于 Web UI 和 CSS 方面的新特性，今年又上新了许多新功能，今天就从中找出了影响最大的几个功能给大家介绍一下 :has() :has() 可以通过检查父元素是否包含特定子元素或这些子元素是否处于特定状态来改变样式...为了解决这个问题，现在在 Web 平台上提供了新的单位值： 小视口高度和宽度（或 svh 和 svw），表示最小的活动视口大小。 较大的视口高度和宽度（lvh 和 lvw），表示最大大小。...这意味着当您向上或向下滚动时，动画会向前或向后滑动。此外，对于滚动驱动动画，您还可以根据元素在其滚动容器中的位置来控制动画。...这允许您创建有趣的效果，例如视差背景图像、滚动进度条和在进入视野时显示自己的图像。 此 API 支持一组 JavaScript 类和 CSS 属性，使您可以轻松创建声明性滚动驱动的动画。...在下面的示例中，点围绕中心点旋转。每个点不是围绕其自身的中心旋转然后向外移动，而是在 X 和 Y 轴上平移。
下图展示了用户触发滚动后到真正滚动期间，耗时最长的前百分之一案例中所耗费的时间。这些数据是由安卓上的 Chrome 访问任意网页后采集的。...4问题与修复 大部分情况下，（我们的优化）不会导致任何 BUG 。但是如果 BUG 真的出现了，最常见问题是当你不希望页面发生滚动时却发生了。...我们发现大量受影响的页面，通过使用touch-action这个CSS属性就能轻松修复（问题）。...5总结 开发者通常只会察觉到，通过优化后的 Chrome 56中访问大多数网页时，滚动响应会更快。而在个别的例子中，开发者可能会发现一些意外的滚动。...开发者在需要时，应该在 touch 系列事件发生前，使用touch-action这一 CSS 属性去阻止某元素滚动或缩放。
页面跨浏览器兼容性 测试 在Chrome, Edge, Firefox和Safari中测试页面 修复 修复应用跨浏览器运行时的问题 页面过渡不要表现得像网络阻塞 当你四处触碰时过渡应该表现顺畅点，哪怕在弱网络下...修复 Google的索引系统确实会运行JavaScript，但是有些问题可能需要被修复来让内容可以访问。...用户体验 页面加载时内容不闪 测试 在PWA里面加载不同的页面，确保页面加载时内容或界面不会“跳动” 修复 确保所有内容，特别是图片和广告，在CSS或者元素属性里有固定尺寸。...在图片加载前，你可以展示一个灰色的方块或者模糊/小的版本（如果可能的话）来作为占位符。 从详情页回退到之前的列表页面时，列表页保持滚动距离 测试 在应用中找一个列表区域。向下滚动。触碰项目进入详情页。...在详情页上下滚动。点击返回，确保列表区域滚动到详情链接/按钮触碰前的位置。 修复 用户点击返回时，恢复列表的滚动位置。一些路由库会有帮你做这个的特性。
您应使用您的一个 Google 帐户登录到 Chrome。 远程调试在隐身模式或访客模式下无法运行。 打开 DevTools。...注：如果您在发现流程中遇到任何问题，您可以通过在 Android 设备上选择 Settings > Developer Options > Revoke USB Debugging Authorizations...（10）]，然后在您的 Android 设备屏幕上点按此元素。 请注意，Select Element 将在第一次触摸后停用，因此，每次想要使用此功能时您都需要重新启用它。...抓屏的透明部分表示设备界面，如 Chrome 多功能框、Android 状态栏或 Android 键盘。 抓屏会对帧率产生负面影响。在测量滚动或动画时停用抓屏，以更准确地了解页面的性能。...如果您的 Android 设备屏幕锁定，您的抓屏内容将消失。 将您的 Android 设备屏幕解锁可自动恢复抓屏。
v3 的collapse折叠组件使用了click的事件监听方式，在移动端会有300ms的延迟 官方貌似在v4中修复了，用v3的话，就自个添加touchstart事件的支持，还要注意touchstart...none; 3.不过一般是偷工减料的，为了统一起来android和ios都能正常，可以利用JS获取元素样式之后，再进行更新，做一个状态叠加 首先，需要给目标元素添加父外层做旋转叠加时用 的时候（有类on的时候）就旋转 .music-btn.on { animation: ..... } 点击时加上一些状态样式变更操作，注意此处需要将父外层与子元素的transform...iPhone或iPad的safari浏览器通过嵌入pdf来预览时，只能看到第一页，无法滚动翻页查看更多 这个问题是ios自家的bug了，所以为了解决，只能引入第三方支持（不再使用浏览器自身支持的...，页面滚动到底部（有滚动条），点击select，input, textarea等相关项时，会自动滚动到页面顶部 在chrome60中还是正常的，一升级就出现问题了 目前还不知道为何，可能是chrome61
为了看所有的新闻我必须滚动大图。而且不能够一次查看加载的新闻。 从用户的反馈得到：反馈是很重要的。这不仅仅是抱怨一个性能，而是花时间解释引起的问题。...更深入的挖掘 通过使用HotJar分析其他网站上的点击和滚动距离，我们注意到类似的问题。Spox.com 的主页最近被重新设计，新的设计侧重于新闻列表，从其他的分离开来。 ?...于是通过分离 Themen des tages 重新设计和旋转木马导航的方法来解决这个问题，如下： ?...为了使测试公平： 只计算标题 100％ 可见的新闻报道 确保浏览器设置为最大宽度/高度为 Macbook 13" 使用相同的浏览器：Google Chrome 缩放级别设置为 100％。...列表与卡片的其他示例 我相信我们不是唯一来解决这个问题的人。 例如，Google 已经对其搜索结果页进行AB测试。 ?
mix-blend-mode：我们通常称之为混合模式，利用混合模式将多个图层混合可以得到一个新的效果，mix-blend-mode 描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。...然而，给元素加上了一个混合模式之后，神奇的事情发生了，3D 效果消失了。...这就很蹊跷了，预想中的混合并没有发生，取而代之的是 3D 的失效。我想，也许与内核有关，上面的效果是在 chrome 65.0.3325.181 试验得到的。 是否与浏览器内核有关？...那应该也有很多人遇到过同样的问题，带着这个疑惑，google 一下。...} 果然，出现了同样的问题，3D 失效： ?
]; 值的一提的是，添加前缀并不是万能的，有些国内的手机就不吃这一套了，今天小伙伴就遇到了；华为的一款手机不支持常规的flex写法。。。...IOS滚动窗滑动到底部还能弹窗拖拉的奇葩修复 这个方案是通过计算离底部多远加状态来阻止touch事件 // 防止内容区域滚到底后引起页面整体的滚动 var content = document.querySelector...webkit-tap-highlight-color:rgba(255,255,255,0) IOS 默认输入框内阴影重置 E{ border: 0; -webkit-appearance: none; } 旋转屏幕时...-3d或者animation也会 transition闪屏 /设置内嵌的元素在 3D 空间如何呈现：保留3D / -webkit-transform-style: preserve-3d; / 设置进行转换的元素的背面在面对用户时是否可见...在部分android 机型中的输入框可能会出现如图怪异的多余的浮出表单，经过观察与测试发现只有input:password类型的输入框存在，那么我们只要使用input:text类型的输入框并通过样式-
在Windows 8中，当用户通过滑动触控切换项目时，FlipView项目切换会进行平滑的滚动。而通过点击或编程时，不会出现平滑的滚动，内容只是简单的切换显示。...而Windows 8.1 为FlipView控件添加了UseTouchAnimationsForAllNavigation属性，当设置为true时，基于触控、按钮和编程方式的切换均会出现平滑滚动的动画，...WebView 更新 Windows 8.1 针对WebView 控件修复了很多问题并添加了新功能，包括： (1). 支持在WebView控件上层显示其他XAML控件。...这一更新主要修复了Windows 8 下，WebView控件在控件叠加显示时的异常。这也是我自己在Windows 8开发中遇到过的很想吐槽的问题之一。我们来看看修复前后的对比情况。...这也算是Windows 8 中控件的吐槽点之一了，当布局需要一个整体的透明度时，WebView就显得格格不入。
今天继续来为大家解读今年的 Google I/O 在这个章节中，主要分享了 Chrome 与其他浏览器合作伙伴以及更广泛生态系统合作的方式，提出了一个新的 Web 基线的概念，目的是尽可能的消除 Web...Chrome 团队在过去一年一直努力解决这个问题，在去年的 Google I/O 上也分享了一些正在做的一些事情，但是进展并不明显。...在今年 Google I/O 的其他演讲中也详细介绍了这些方式，但是这也只是明确仅存在于 Chrome 中的方式。 在 web.dev 上，大家可以找到不同浏览器引擎世界中的最佳实践的指南。...在今年 Google I/O 中，介绍了一些三大浏览器引擎都兼容的 Web 新功能： 当功能互相兼容时，web.dev 会发表相应的文章来介绍它们，因为当一个特性在所有三个引擎中出现时，大家才会觉得这是一个可以在生产使用的功能...Interop项目就是为了解决这个问题，Google 与来自 Mozilla 和苹果的代表以及其他合作伙伴一起工作，定义了 2022 年的一组功能，然后所有浏览器都会一起努力推出这些功能。
下面的例子分别展示了 Chrome 和 Safari 中的同一个按钮，后者默认会有一个灰色背景。...在 macOS 下的 Chrome 中，这看起来不错，但是在 Windows 下的 Chrome 中，滚动条始终存在（即使内容很短）。这是因为 scroll-y 会无视内容，一直显示滚动条。...问题是，即使 aside 是空的，它的高度也会和 main 的高度相等。 要修复这个问题，可以让 aside 元素与其父元素的起点对齐，这样它的高度就不会扩展了。...使用伪元素 无论何时，我都很喜欢使用伪元素。伪元素为我们提供了一种创建假元素的方法，主要用来装饰，同时又无需将其添加到 HTML 中。...RTL 布局中的手机号码 在一个从右到左的布局中添加诸如 + 972-123555777 的手机号码时，加号将会位于号码末尾。要修复这个问题，可以重新指定手机号码的方向。
逐字渲染的挑战最近在开发AI聊天助手的时候，遇到了一个很有趣的滚动问题。我们需要开发一个类似微信聊天框的交互体验：每当聊天框中展示新消息时，需要将聊天框滚动到底部，展示最新消息。...如果在 web 什么也不做，聊天体验可能是这样的，需要用户手动滚动到最新消息：试想一下如何在 web 中实现微信的效果。每当聊天框中接收到新消息时，都需要调用滚动方法滚动到消息底部。...滚动条调整与滚动行为反转最核心的问题已经解决了，但总觉得哪里看起来怪怪的。滚动条怎么跑到左边，并且滚动行为和鼠标滚轮的方向反了，滚轮向上滚，聊天框却向下滚。...消息卡片组件完全感知不到自己其实已经被旋转了 180° 后又旋转了 180° 了。聊天框的父组件也完全不知道自己的子节点被转了又转。...消息列表开始滚动时，占位元素又会被挤压消失，不影响列表滚动效果。
观察者触发目标元素在根元素内部出现或消失的每一个百分比，以便每当比率 更改至少百分之一，此框下方的输出文本将更新。...还要考虑可以调整根元素大小的情况，例如将视口从纵向旋转为横向。 查找位置 那么，我们如何知道目标元素相对于根元素的位置呢？...父容器是根元素，内部具有目标背景的子容器是目标元素。阈值是一个0、0.5和1的数组。在根元素中滚动时，将出现目标，并且其位置将在按钮上方的输出中报告。...Caniuse 所有主要的浏览器都已经支持了一段时间。和预期一样，IE在任何级别都不支持它，但是W3C提供了一个polyfill[6]来解决这个问题。...但是，如果我们在目标元素移入和移出根元素时在浏览器中四处移动鼠标，则intersectionRatio确实会更新。我的猜测是，只有在存在某种形式的用户交互时，Chrome才会“激活”观察者。
第三种确定滚动偏移量的方法是使用元素偏移量。这意味着可以指定页面内的元素，其位置决定了滚动时间线以及要使用这些元素的哪个边缘。指定元素是使用 selector() 函数完成的，该函数接收元素的 id。...之前在 不可思议的纯 CSS 滚动进度条效果 一文中，我们介绍了一种使用渐变实现的纯 CSS 滚动进度指示器效果： 该方法有些小小的瑕疵。...，就是动画的开始时间都是从滚动一开始就开始了，刚好在滚动结束时结束。...在滚动过程中，我们可以将一个元素，划分为 3 个区域： 滚动过程中，从上方视野盲区，进入视野 滚动过程中，处于视野中 滚动过程中，从视野中，进入下方视野盲区 在这里，我们就可以得到两个边界，上方边界，下方边界...0 和 1 实际表示的是，元素滚动中预期可见的百分比。
兼容性： ①滚动条外观不同； ②宽度设定机制不同。 ? 因为IE7下width宽度计算为整400px，然而垂直滚动条占用了部分宽度，所以出现了水平滚动条。...想要去掉这个水平滚动条，只需要删除width:100%就可以了。 作用前提： ①非display:inline水平； ②对应方位的尺寸限制。...水平居中跳动问题修复： ①html{overflow:scroll;}; ②.container{padding-left:calc((100vw - width) * .5);}——100vw...（2）锚点定位的本质 在页面可滚动容器中，通过锚链滚动到其对应的锚点元素，即改变容器的滚动高度。 前提：①容器可滚动；②锚点元素在容器内。 ...（3）锚点定位的触发 ①url地址中的锚链与锚点元素； ②可focus的锚点元素处于focus状态； （4）锚点定位的作用 ①快速定位 ②选项卡技术 ③单页应用
更新内容： 提高了应用程序库加载的安全性（DiD） 修复了 JavaScript 序列化的一个问题（DiD） 修复了 IndexedDB 中潜在的越界问题（DiD） 修复了小部件（？）...数据处理代码中的潜在问题（DiD） 修复了处理截断/损坏的传输流时可能被利用的崩溃问题 修复了 DOM FileReader 代码中的一个问题 将 NSS 更新至 3.52.3 以解决安全问题 修复了以下安全问题...更新内容： 修复了可能导致域名混淆的 IDN 规范遵从性问题 修复了几个间歇性的线程健全性问题（DiD） 修复了网络连接中可能出现的 UAF 风险（DiD） 修复了潜在的奔溃风险（尚未暴露，DiD） 修复了提交表单时潜在的被骗风险...v29.2.1 (2021-06-08) 这是一个小小的错误修正版本~ 更新内容： 解决了自动完成偶尔不弹出窗口的问题（同时添加一些调试日志，以便找到根源） 修正了鼠标滚动 DOM 抛出错误的问题 修正了从睡眠状态恢复时...，网络发现程序无法正确启动的问题 修正了通过 DOM 大量上传文件时的崩溃问题 修正了可编辑菜单列表按钮在 GTK3 上不可见的问题 减少了错误日志中「重要配置项」的数量，比如单个打印机的属性信息 修复了
See https://www.chromestatus.com/features/5093566007214080 于是 Google 了一番，找到这篇文章，有了详细解释。...所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive...浏览器忽略 preventDefault() 就可以第一时间滚动了。...： 如果在以上这 3 个元素的 touchstart 和 touchmove 事件处理函数中调用 e.preventDefault() ，会被浏览器忽略掉，并不会阻止默认行为。...中，照样滚动，而且控制台会有提示，blablabla window.addEventListener('touchmove', e => e.preventDefault()) 那么如何解决这个问题呢
根据信息显示，Google 最早从今年 5 月份就开始了一项新的计划，该计划将为 Fuchsia OS 构建 Chrome 浏览器，这意味着 Google 将把完整的 Chrome 浏览器体验引入 Fuchsia...关于 Bug 修复方面，Android 12 Beta 4 修复了部分未接来电通知无法关闭的问题，修复了通知栏不显示闹钟和静音图标的问题。...换句话说，当你远程工作时你并不总是在工作中。你们中的很多人可能会感到震惊，但我真的相信你们不适合 Xsolla。...有了这一笔收入，我们滚动发展，才有了今天的世界 500 强，才有了今天的全球第二！...Switch 组件支持 disabled 属性 此外还修复了一些问题，更多信息可查看更新说明： https://github.com/NervJS/taro/releases/tag/v3.3.3 Webpack
，通过修改子孙节点属性无法显示；visibility:hidden;是继承属性，子孙节点消失由于继承了hidden，通过设置visibility: visible;可以让子孙节点显式 修改常规流中元素的...0，从而使这个元素“消失”在页面中 rgba() 和 opacity 的透明效果有什么不同？...是 CSS3 中写伪元素的新语法； :after 是 CSS1 中存在的、兼容IE的老语法 如何修改Chrome记住密码后自动填充表单的黄色背景？...产生原因：由于Chrome默认会给自动填充的input表单加上 input:-webkit-autofill 私有属性造成的 解决方案1：在form标签上直接关闭了表单的自动填充：autocomplete...时不能平滑滚动的问题怎么处理？
，需要手动设置样式保持表单对齐 Bug Fixes Popconfirm: 修复确认框中按钮默认大小 Upload: 修复上传中状态文案 Popup: 修复 hideEmptyPopup 在动态改变内容时不生效的问题...success 事件先于 progress 事件触发时，上传文件 loadingFile 值不正确的问题 修复最大数量限制 max 在多次文件选择中判断不正确的问题 Pagination: 修复跳转页输入框展示了额外...placeholder 默认内容的问题 TreeSelect: 修复 treeProps 中同时传入 key、load 时选中项显示的问题 修正 TreeSelect 的交互行为，与 Select 保持一致...onFixedChange 触发时机，在固定状态发生变化时才会触发该事件（改动之前为：滚动一直触发） Table: 自定义列配置功能：多级表头和列显示配置同时存在时，无法进行正确的列配置的问题，列配置仅显示了第一层表头...修复最大宽度和文案没对齐的问题 Input: 修复设置 clearable，点击不清除内容的问题 Dialog: 修复 1px 边框在 iOS 上消失的问题 Swiper: 修复延迟设置地址时，显示不正常的问题
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
