[Webkit-unassigned] [Bug 194332] New: CSS custom properties on pseudo elements background gradients causes infinite layout and high CPU load

Wed Feb 6 01:06:16 PST 2019

https://bugs.webkit.org/show_bug.cgi?id=194332

            Bug ID: 194332
           Summary: CSS custom properties on pseudo elements background
                    gradients causes infinite layout and high CPU load
           Product: WebKit
           Version: Safari 12
          Hardware: Unspecified
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: CSS
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: nolimits4web at gmail.com

CSS custom properties used in gradient images on pseudo elements causes infinite relayout and high CPU load.

Reproduction scenario is simple:

<body>
  <style>
    :root {
      --link-highlight-color: rgba(0,0,0,0.1);
    }
    a {
      position: relative;
      min-width: 44px;
      height: 44px;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      text-decoration: none;
    }
    a:before {
      content: '';
      width: 152%;
      height: 152%;
      position: absolute;
      left: -26%;
      top: -26%;
      background-image: radial-gradient(circle at center, var(--link-highlight-color) 66%, rgba(255,255,255,0) 66%);
      background-repeat: no-repeat;
      background-position: center;
      background-size: 100% 100%;
      opacity: 0;
      pointer-events: none;
      transition-duration: 600ms;
    }
    a:hover:before {
      opacity: 1;
    }
  </style>
  <p>
    <a href="#">Link 1</a>
  </p>
  <p>
    <a href="#">Another Link</a>
  </p>
  <p>
    <a href="#">Link 3</a>
  </p>
</body>
```

Here is the live example on JSFiddle https://jsfiddle.net/4gb9ynLz/

Such simple layout causes 100% CPU load on my system:

MacBook Pro 15 (Retina, Mid 2012)
macOs 10.14.2 (18C54)
Safari: 12.0.2 (14606.3.4)

Same happens on latest iOS 12.1.3 (16D39) Safari, iPhone X

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190206/bce3821c/attachment-0001.html>