Attachment 369148 Details for Bug 194332 – Standalone version of the JSFiddle

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:

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 &amp; 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 &amp; 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 &amp; 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 &amp; 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>

Actions: View

Attachments on bug 194332: 369148 | 427745 | 427747 | 427754 | 427756 | 427763 | 427888 | 427898 | 427904 | 427906