WebKit Bugzilla
Attachment 369148 Details for
Bug 194332
: CSS custom properties on pseudo elements background gradients causes infinite layout and high CPU load
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
Standalone version of the JSFiddle
color-with-alpha.html (text/html), 1.77 KB, created by
Simon Fraser (smfr)
on 2019-05-06 11:34:30 PDT
(
hide
)
Description:
Standalone version of the JSFiddle
Filename:
MIME Type:
Creator:
Simon Fraser (smfr)
Created:
2019-05-06 11:34:30 PDT
Size:
1.77 KB
patch
obsolete
><!DOCTYPE html> ><html> ><head> > <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> > <style> > p { > border: 1px solid grey; > } > > .explanation p { > border: none; > } > > .no-loop-on-hover:hover { > transition: all 0.5s; > box-shadow: rgba(0, 0, 0, 0.9) 1px 1px 10px; > } > > > .loop-on-hover:hover { > transition: all 0.5s; > box-shadow: rgba(1, 0, 0, 0.9) 1px 1px 10px; > } > > .forever { > transition: all 0.5s; > } > </style> ></head> ><body> > > <div class="explanation"> > <p> > Safari (Webkit?) rendering bug. Open The timelines panel of the dev tools, record and watch "Layout & Rendering" during these tests. > </p> > <p> > In Safari, the CPU gets pegged due to infinite rendering when all the following are true: > </p> > <ol> > <li> > a transition is defined that is not instantaneous > </li> > <li> > there is an alpha channel in the color that is <strong>exclusively</strong> between 0 and 1 > </li> > <li> > there is at least one color channel which is <strong>exclusively</strong> between 0 and 255 > </li> > </ol> > > > </div> > > <p class="no-loop-on-hover"> > No lasting CPU load when you hover me. (I do not satisfy requirement #3) > </p> > > <p class="loop-on-hover"> > Watch Layout & Rendering when you hover on me. As long as you stay hovered, there is an infinite rendering loop. > </p> > > <p class="loop-on-hover forever"> > I also create a loop, but in my case, it never stops after the first hover unless you refresh the page (remove me from the DOM). This is because I also transition <em>out</em> of the shadow. > </p> > > ></body> ></html>
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <style> p { border: 1px solid grey; } .explanation p { border: none; } .no-loop-on-hover:hover { transition: all 0.5s; box-shadow: rgba(0, 0, 0, 0.9) 1px 1px 10px; } .loop-on-hover:hover { transition: all 0.5s; box-shadow: rgba(1, 0, 0, 0.9) 1px 1px 10px; } .forever { transition: all 0.5s; } </style> </head> <body> <div class="explanation"> <p> Safari (Webkit?) rendering bug. Open The timelines panel of the dev tools, record and watch "Layout & Rendering" during these tests. </p> <p> In Safari, the CPU gets pegged due to infinite rendering when all the following are true: </p> <ol> <li> a transition is defined that is not instantaneous </li> <li> there is an alpha channel in the color that is <strong>exclusively</strong> between 0 and 1 </li> <li> there is at least one color channel which is <strong>exclusively</strong> between 0 and 255 </li> </ol> </div> <p class="no-loop-on-hover"> No lasting CPU load when you hover me. (I do not satisfy requirement #3) </p> <p class="loop-on-hover"> Watch Layout & Rendering when you hover on me. As long as you stay hovered, there is an infinite rendering loop. </p> <p class="loop-on-hover forever"> I also create a loop, but in my case, it never stops after the first hover unless you refresh the page (remove me from the DOM). This is because I also transition <em>out</em> of the shadow. </p> </body> </html>
View Attachment As Raw
Actions:
View
Attachments on
bug 194332
:
369148
|
427745
|
427747
|
427754
|
427756
|
427763
|
427888
|
427898
|
427904
|
427906