Consider improving interoperability of <iframe> throttling margins. about html HOT 10 OPEN emilio commented on June 20, 2024 Consider improving interoperability of throttling margins.<p>from html.</p></section> </section> </article> <article> <h2 class="h2">Comments (10)</h2> <section class="issue-comment"> <section id="2107918995" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1323194?v=4" alt="emilio avatar" /> <a class="issue-username" href="/emilio">emilio</a> <span class="issue-time"> commented on June 20, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>1 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Distance with the viewport (as in, <code class="notranslate">IntersectionObserver</code> margins etc).</p><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2108264978" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1906955?v=4" alt="vmpstr avatar" /> <a class="issue-username" href="/vmpstr">vmpstr</a> <span class="issue-time"> commented on June 20, 2024 </span> <span class="issue-vote"> <i class="icon-vote"></i>1 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">For <code class="notranslate">content-visibility</code>, it's not a comprehensive list but selection, focus, and accessibility (find in page specifically) are all things that cause us to do rendering. FWIW, <code class="notranslate">content-visibility: auto</code> also has a user-agent defined margin for visibility that causes it to be relevant, which is similar to the iframe one if I understand correctly.</p> <p dir="auto">I don't think specifying the exact extent of this margin is worthwhile, but specifying more explicitly cases where we <em>don't</em> want throttling is useful.</p><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2100995111" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/6234199?v=4" alt="szager-chromium avatar" /> <a class="issue-username" href="/szager-chromium">szager-chromium</a> <span class="issue-time"> commented on June 20, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">For reference, here is chromium's logic:</p> <p dir="auto"><a href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/frame_view.cc;drc=4834462d69ddf6e0ac6b27572618e4436de4a2f3;l=317" rel="nofollow">https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/frame_view.cc;drc=4834462d69ddf6e0ac6b27572618e4436de4a2f3;l=317</a></p> <p dir="auto">Historically, we have also had one or two weird carve-outs for throttling logic that were driven by real-world usage; for example:</p> <p dir="auto"><a href="https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/frame_view.cc;drc=4834462d69ddf6e0ac6b27572618e4436de4a2f3;l=279" rel="nofollow">https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/frame/frame_view.cc;drc=4834462d69ddf6e0ac6b27572618e4436de4a2f3;l=279</a></p> <p dir="auto">A tighter spec with WPT would be great.</p><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2103437353" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63884798?v=4" alt="khushalsagar avatar" /> <a class="issue-username" href="/khushalsagar">khushalsagar</a> <span class="issue-time"> commented on June 20, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Other than the visibility based throttling <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/szager-chromium/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/szager-chromium">@szager-chromium</a> mentioned, <code class="notranslate">content-visibility</code> is the other reason I could find for it (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vmpstr/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vmpstr">@vmpstr</a> for it). The throttling done for view transitions is already carved out separately.</p><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2107873559" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1906955?v=4" alt="vmpstr avatar" /> <a class="issue-username" href="/vmpstr">vmpstr</a> <span class="issue-time"> commented on June 20, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">c-v language is in <a href="https://www.w3.org/TR/css-contain-2/#cv-notes" rel="nofollow">https://www.w3.org/TR/css-contain-2/#cv-notes</a> point number 7, but it's "should" language</p><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2107884301" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1544111?v=4" alt="annevk avatar" /> <a class="issue-username" href="/annevk">annevk</a> <span class="issue-time"> commented on June 20, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">What does margin refer to here? Criteria?</p><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2108096622" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/1544111?v=4" alt="annevk avatar" /> <a class="issue-username" href="/annevk">annevk</a> <span class="issue-time"> commented on June 20, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Thanks! This would be reasonable to standardize more. Some relevant WebKit code:</p> <ul dir="auto"> <li><a href="https://github.com/WebKit/WebKit/blob/350878c832f8c798c309d5f28655bec537754fc0/Source/WebCore/page/LocalFrameView.cpp#L2065-L2084">LocalFrameView::viewportContentsChanged</a></li> <li><a href="https://github.com/WebKit/WebKit/blob/350878c832f8c798c309d5f28655bec537754fc0/Source/WebCore/page/LocalFrameView.cpp#L2894-L2919">LocalFrameView::updateScriptedAnimationsAndTimersThrottlingState</a> (we currently do not throttle <code class="notranslate">display:none</code>, but if everyone else does this seems reasonable to change)</li> <li><a href="https://github.com/WebKit/WebKit/blob/350878c832f8c798c309d5f28655bec537754fc0/Source/WebCore/page/Page.cpp#L2318-L2349">Page::preferredRenderingUpdateFramesPerSecond</a></li> <li><a href="https://github.com/WebKit/WebKit/blob/350878c832f8c798c309d5f28655bec537754fc0/Source/WebCore/page/DOMTimer.cpp#L260-L288">DOMTimer::updateThrottlingStateIfNecessary</a></li> </ul><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2108232093" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/63884798?v=4" alt="khushalsagar avatar" /> <a class="issue-username" href="/khushalsagar">khushalsagar</a> <span class="issue-time"> commented on June 20, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">I'm wondering if content-visibility is a good concept to build on for this throttling; since the goal is similar: minimize rendering cost of content not <em>relevant</em> to the user (as opposed to just visible). For example, IIUC c-v will force layout for find-in-page. I'm wondering if lifecycle updates should similarly be resumed for offscreen iframes when the user triggers find-in-page, it's possible that a DOM update (which populates the content the user is searching for) is blocked on the next rAF.</p> <p dir="auto"><a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/vmpstr/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/vmpstr">@vmpstr</a> might have input based on edge cases like this addressed for c-v.</p><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2108409089" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/6234199?v=4" alt="szager-chromium avatar" /> <a class="issue-username" href="/szager-chromium">szager-chromium</a> <span class="issue-time"> commented on June 20, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">IIRC, render throttling already has a carve-out that allows find-in-page to work correctly. I could be wrong.</p> <p dir="auto">We should be mindful that throttling rendering for off-screen iframes also prevents badly-behaved iframes from sabotaging battery usage and performance of the embedding page. In some situations chromium will throttle <code class="notranslate">setTimeout</code> and <code class="notranslate">setInterval</code> timers to 1s, and I wouldn't want <code class="notranslate">requestAnimationFrame</code> to become an escape hatch that allows an iframe to run lots of code at high frequency.</p><p>from html.</p></section> </section> <section class="issue-comment"> <section id="2114645927" class="issue-head"> <img class="issue-avatar" src="https://avatars.githubusercontent.com/u/244772?v=4" alt="zcorpan avatar" /> <a class="issue-username" href="/zcorpan">zcorpan</a> <span class="issue-time"> commented on June 20, 2024 </span> </section> <section class="markdown markdown-js p-5"><p dir="auto">Also see <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1707398428" data-permission-text="Title is private" data-url="https://github.com/w3c/IntersectionObserver/issues/508" data-hovercard-type="issue" data-hovercard-url="/w3c/IntersectionObserver/issues/508/hovercard?comment_id=1545646474&comment_type=issue_comment" href="https://github.com/w3c/IntersectionObserver/issues/508#issuecomment-1545646474">w3c/IntersectionObserver#508 (comment)</a></p> <p dir="auto">What WebKit does there seems better from a privacy POV since it avoids the Text Fragment side-channel using APIs affected by thottling.</p><p>from html.</p></section> </section> </article> <section> <h2 class="h2">Related Issues (20)</h2> <div class="issue"> <ul> <li> <a href="/whatwg/html/issues/10323">Confusion between the visual effect and the dropEffect attribute in drag-n-drop events in spec</a> </li> <li> <a href="/whatwg/html/issues/10324">Spec allows multiple values for dropEffect in some effectAllowed cases which might cause different browsers to behave differently</a> </li> <li> <a href="/whatwg/html/issues/10325">Spec allows multiple values for dropEffect in some current selection case which might cause different browsers to behave differently</a> </li> <li> <a href="/whatwg/html/issues/10326">If a web author sets dropEffect to something that is not allowed according to spec, should UA respect their choice by updating dropEffect attribute?</a> </li> <li> <a href="/whatwg/html/issues/10330">template.content has unusable value</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/whatwg/html/issues/10331">Clean up HTML <-> DOM hooks</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/whatwg/html/issues/10334">The dropEffect column in the Drag and Drop events summary table should clarify it represents default values.</a> </li> <li> <a href="/whatwg/html/issues/10335">Drag and drop spec allows multiple values for dropEffect which might cause browsers to behave differently.</a> </li> <li> <a href="/whatwg/html/issues/10336">How should UAs handle web authors setting dropEffect values?</a> </li> <li> <a href="/whatwg/html/issues/10337">Proposal for event ordering when inserting replacement text such as text prediction, spell checker, etc</a> </li> <li> <a href="/whatwg/html/issues/10338">It's unclear how shadows should be drawn across various compositing operators</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/whatwg/html/issues/10339">Should custom validity error message treat \r as newline?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/whatwg/html/issues/10340">Upcoming WHATNOT meeting on 5/16/2024</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 5</span> </li> <li> <a href="/whatwg/html/issues/10343">Date Picker popup doesn't propagate shadow DOM events into the light DOM</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> <li> <a href="/whatwg/html/issues/10346">Clarify `detail` value of synthetic click event</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 3</span> </li> <li> <a href="/whatwg/html/issues/10347">Consider making "gamepadconnected" part of “activation triggering user event”?</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 1</span> </li> <li> <a href="/whatwg/html/issues/10351">Meeting 2 for joint OpenUI-WHATWG/HTML-CSSWG task force on styleable form controls</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 4</span> </li> <li> <a href="/whatwg/html/issues/10352">Upcoming WHATNOT meeting on 5/23/2024</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 6</span> </li> <li> <a href="/whatwg/html/issues/10357">[Proposal]: Enable `HTMLElement` attributes to be toggled without JavaScript</a> <span class="text-red-600 text-xs font-normal py-0.5 px-1 border border-red-600 rounded-md">HOT 2</span> </li> </ul> </div> </section> </main> <section id="more" class="flex-none w-full md:w-60 text-gray-600 bg-gray-50 px-5 md:px-3 rounded-md dark-color"> <div class="w-full md:w-60 h-0.5"></div> <section> <!-- recommend projects --> <h2 class="h2 py-3.5">Recommend Projects</h2> <ul> <li class="mb-4"> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook/react"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://raw.githubusercontent.com/facebook/create-react-app/master/packages/cra-template/template/public/logo192.png" alt="React photo" /> React </a> </h3> <p class="article-more pt-1">A declarative, efficient, and flexible JavaScript library for building user interfaces.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/vuejs/vue"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c8f91d18976e27123643a926a2588b8d931a0292fd0b6532c3155379e8591629/68747470733a2f2f7675656a732e6f72672f696d616765732f6c6f676f2e706e67" alt="Vue.js photo" /> Vue.js </a> </h3> <p class="article-more pt-1">🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft/TypeScript"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://www.typescriptlang.org/favicon-32x32.png" alt="Typescript photo" /> Typescript </a> </h3> <p class="article-more pt-1">TypeScript is a superset of JavaScript that compiles to clean JavaScript output.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tensorflow/tensorflow"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/c04e16c05de80dadbdc990884672fc941fdcbbfbb02b31dd48c248d010861426/68747470733a2f2f7777772e74656e736f72666c6f772e6f72672f696d616765732f74665f6c6f676f5f736f6369616c2e706e67" alt="TensorFlow photo" /> TensorFlow </a> </h3> <p class="article-more pt-1">An Open Source Machine Learning Framework for Everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/django/django"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars2.githubusercontent.com/u/27804?s=200&v=4" alt="Django photo" /> Django </a> </h3> <p class="article-more pt-1">The Web framework for perfectionists with deadlines.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/laravel/laravel"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://laravel.com/img/logomark.min.svg" alt="Laravel photo" /> Laravel </a> </h3> <p class="article-more pt-1">A PHP framework for web artisans</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://camo.githubusercontent.com/586ccf0aad9684edc821658cee04146cf36d1f1d5ec904bbefd72728909ccb2e/68747470733a2f2f64336a732e6f72672f6c6f676f2e737667" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Bring data to life with SVG, Canvas and HTML. 📊📈🎉</p> </article> </li> <li> <div> </div> </li> </ul> </section> <section> <!-- recommend topics --> <h2 class="h2 py-3.5">Recommend Topics</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/javascript"> javascript </a> </h3> <p class="article-more pt-1">JavaScript (JS) is a lightweight interpreted programming language with first-class functions.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/web"> web </a> </h3> <p class="article-more pt-1">Some thing interesting about web. New door for the world.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/server"> server </a> </h3> <p class="article-more pt-1">A server is a program made to process requests and deliver data to clients.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/machine-learning"> Machine learning </a> </h3> <p class="article-more pt-1">Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/visualization"> Visualization </a> </h3> <p class="article-more pt-1">Some thing interesting about visualization, use data art</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/topic/game"> Game </a> </h3> <p class="article-more pt-1">Some thing interesting about game, make everyone happy.</p> </article> </li> <li> </li> </ul> </section> <section> <!-- recommend users --> <h2 class="h2 py-3.5">Recommend Org</h2> <ul> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/facebook"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/69631?v=4" alt="Facebook photo" /> Facebook </a> </h3> <p class="article-more pt-1">We are working to build community through open source technology. NB: members must have two-factor auth.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/microsoft"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/6154722?v=4" alt="Microsoft photo" /> Microsoft </a> </h3> <p class="article-more pt-1">Open source projects and samples from Microsoft.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/google"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1342004?v=4" alt="Google photo" /> Google </a> </h3> <p class="article-more pt-1">Google ❤️ Open Source for everyone.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/alibaba"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1961952?v=4" alt="Alibaba photo" /> Alibaba </a> </h3> <p class="article-more pt-1">Alibaba Open Source for everyone</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/d3"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/1562726?v=4" alt="D3 photo" /> D3 </a> </h3> <p class="article-more pt-1">Data-Driven Documents codes.</p> </article> </li> <li> <article class="small-box"> <h3 class="article-title"> <a class="block break-all" href="/tencent"> <img loading="lazy" class="inline-block w-6 h-6 rounded-md border border-white" width="24" height="24" src="https://avatars.githubusercontent.com/u/18461506?v=4" alt="Tencent photo" /> Tencent </a> </h3> <p class="article-more pt-1">China tencent open source team.</p> </article> </li> <li> </li> </ul> </section> </section> </div> </div> <!-- footer --> <footer class="sizeing text-xs text-center p-5"> <div>Friends: <a class="hover:underline" target="_blank" href="https://www.chanpinqingbaoju.com">ProductDiscover</a> </div> Copyright © 2024 Giter Club <!-- & <span class="block md:inline">Data Power by github.com</span> --> ❤️ <a class="hover:underline block md:inline" href="mailto:cs.victor.edison@gmail.com">Mail to me</a> </footer> </body> </html>
emilio
commented on June 20, 2024
emilio
commented on June 20, 2024
emilio
commented on June 20, 2024