问题标签 [reflow]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angularjs - 带有 ng-repeat 的 Chrome/Webkit 重排错误
我对 angularjs 很陌生,我偶然发现了一个奇怪的错误。
我用 CSS 和 HTML 做了一个时间线,然后用ng-repeat
它来动态生成它。但是,在 Webkit 浏览器上,时间线无法正确显示。
不幸的是,由于我的帐户是新帐户,因此我无法在帖子中嵌入图片,因此我在此处上传了它们:
Webkit 渲染 http://i.imgur.com/Gdt2h5F.png
但是,如果我调整窗口大小、打开控制台或更改任何 CSS 属性,时间线现在看起来不错:http: //i.imgur.com/5yCXSfs.png
它还可以在 Firefox 或 Safari 上完美运行,无需重排。
我已经研究过了$scope.$apply
,但这不起作用,因为我使用 angular 来生成值,所以我不能调用它,无论如何它应该由 angular 自动调用。
请注意,如果我<ul><li></li></ul>
手动创建时间线,时间线会正确显示。
这是代码示例:
此外,当此错误发生时,我可以在更改页面时在其他部分视图上看到时间线的伪影,这仅在 Chrome 上发生(没有任何扩展)。
jquery-mobile - 带有名称/值列的 jQuery 移动表重排
jQuery 移动表格重排适用于带有 THEAD 的表格。但是对于具有名称/值列的表,例如没有 THEAD 的 4 列
如何让它响应?在智能手机上像下面这样
或者
html - 有没有办法在 Angular 中立即检测回流,而不使用 $timeout?
我正在一个网站上使用可滚动的画布列表来绘制数据,并且每当它们所在的 div 的宽度发生变化时,我都需要调整画布的大小。
我在大多数情况下都可以使用它,但是如果我删除了一个使滚动条消失的绘图,它就不起作用了。我尝试了以下方法,其中 plotsScroller 是带有滚动条的 div,而 plotsList 是其中的内容:
这段代码可以工作,除非$digest
在移除滚动条的回流之后没有发生任何事情;$digest
当我删除一个情节时会调用它,但我猜回流会在以后发生。
有谁知道我如何在不使用的情况下检测回流$timeout
?
javascript - 我怎样才能在砌体中订购 DOM?
我怎样才能在砌体中订购 DOM?
这是我的代码,http://jsbin.com/niqasiqisi/1/edit?html ,css,output
在这个我想订购如下的输入元素
[1]|[4]
[2]|[5]
[3]|[6]
如果我删除 [2],则 [3] 应代替 [2],而 [4] 应位于下方。如何使用砌体创建这样的布局。这样做的特点是什么?
html - 如何让我的提交按钮工作?
我不是编码专家。事实上,这是我第一个真正的 CSS 项目。我在 Adobe Edge Reflow 中创建了页面,并将 CSS 导出到了 dreamweaver。我遇到的问题是我无法让我的表单真正工作。我希望表格直接发送到我的电子邮件,没有特定的格式。谁能帮我吗?
html - 没有回流的并排响应图像
想要显示 2 个响应式图像,而无需在加载图像时让浏览器重排屏幕。我目前正在使用此答案的修改版本:响应式设计,图像,如何设置宽度/高度以避免图像加载时回流
这是单个响应图像的小提琴:https ://jsfiddle.net/hxraak4u/
HTML
CSS
注意:我使用一些内联样式是因为我使用 Razor 为图像创建 HTML 并设置宽度、高度和高度/宽度(底部填充百分比)。
我现在正试图让 2 个不同高度的图像并排显示,同时保留我已经工作的内容。具体来说:
- 不同高度的图像并排显示
- 图像以它们的父 div 为中心
- 图像显示不大于 100%
- 如果显示的宽度减小到小于两个图像中任何一个的宽度,则使这两个图像垂直堆叠
- 如果显示进一步缩小,则根据需要缩小图像的宽度,同时保持宽高比 - 标准响应式 UI
- 打印时,不要在页面上打断图像,无论是一行中的 2 个图像还是一个,但不要要求两个图像一起在不同行上时不打断页面
- 加载 HTML 时,根据显示的宽度和宽度/高度比为每个图像保留垂直空间 - 防止回流
javascript - 如何通过 JavaScript 计算浏览器中的重排
我想为 JavaScript 函数编写一个单元测试,并测量一个函数在浏览器中触发重排的频率。给定以下示例:
第一个示例的单元测试应该失败,因为它会触发每个元素的重排,但应该通过第二个示例,因为它不会触发重排。
唯一接近我想要的东西是mozPaintCount
,但它只会在每次油漆时增加,而不是在每次回流时增加。我需要类似mozReflowCount
or的东西mozRecalculateStyleCount
,但我在任何浏览器中都找不到任何可能的东西。如果存在这样的属性,则单元测试可能如下所示:
我知道我可以查看浏览器的开发人员工具来手动检查触发了多少回流或“强制同步布局”,但我不知道如何从 JavaScript 单元测试中访问这些数据。
问:如何通过 JavaScript 计算浏览器中的重排?
javascript - 进度条导致大量浏览器重排
我的网站上有一个进度条,可以顺利更新,它基本上会在用户访问网站的整个过程中运行,因为它是一个游戏元素。我注意到如果我打开控制台,浏览器控制台日志中会出现大量浏览器重排。我基本上没有在没有进度条的情况下记录浏览器重排,并且在运行时每秒大约有 100 次重排。所以我有四个问题:
1)这很糟糕吗?网站的其余部分似乎一点也不落后,但在浏览器中不断记录这么多东西似乎相当令人不安。
2) 这是每次重排时更新和重新计算整个页面还是只是进度条周围的区域?换句话说,它是一种有效的操作吗?
3)有什么办法可以关闭它,因为现在很难看到控制台错误,因为它们很快就会被推离屏幕。
4)有没有办法最小化浏览器重排,同时也有一个平滑的更新进度条?顺便说一下,进度条来自引导程序。
javascript - Javascript html 回流计数
我想知道优化一些像这样的简单代码是否值得:
我们要进行多少次回流?浏览器会将它们全部打包成 1 次回流还是会导致 4 次回流?
css - 为什么 textContent 不会触发重排
我在 MDN 上查看 textContent 和 innerText 之间的区别。它向我展示了一些让我很困惑的东西。
1.innerText知道样式,不会返回隐藏元素的文本,而textContent会。(没问题,完全明白)
2.由于innerText知道CSS样式,它会触发重排,而textContent不会。(为什么?)