Closed Bug 1710503 Opened 3 years ago Closed 3 years ago

Incorrect blending when using transform: skewX

Categories

(Core :: Graphics: WebRender, defect)

Product:
Core
Component:
Graphics: WebRender
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
90 Branch
Tracking Flags:
Tracking Status
firefox-esr78 --- unaffected
firefox88 --- wontfix
firefox89 --- wontfix
firefox90 --- fixed

People

(Reporter: ksenia, Assigned: gw)

References

(Regression,
URL
)

Details

(Keywords: regression)

Attachments

(2 files)

73083.html
5.79 KB, text/html
Details
Bug 1710503 - Fix blend container + complex transform optimization
48 bytes, text/x-phabricator-request
Details | Review

This was originally reported in https://github.com/webcompat/web-bugs/issues/73083

To reproduce, visit https://demos.reytheme.com/amsterdam and observe the slider

Expected:
Only "active" image is displayed in the slider
Actual:
There is another image present in the background of the slider covering other elements

mozregression points to
https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=cf0951d3d50c5d6bf0b631ae776ca12b87de4f33&tochange=23bd3cec784397ac9ce2d1d69fda2aa334ed9515

Attached file 73083.html —

I've attached a slightly reduced test case. There is a few nested elements with transform: skewX and <div class="coverSkew-slideBg"></div> is the element that has mix-blend-mode: multiply; applied to it

Hi Glenn, would you be able to take a look?

Flags: needinfo?(gwatson)

I can repro this, reduced the test case a bit further:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="width=device-width, initial-scale=1" name="viewport">
  <style>

    .rey-coverSkew {
      --skew-deg: 19deg;
      height: 860px;
      width: 100%;
    }

    .rey-coverSkew .coverSkew-slides {
      width: 100%;
      height: 100%;
    }

    .rey-coverSkew .coverSkew-slidesInner {
      width: 100%;
      height: 100%;
      overflow: hidden;
      transform: skewX(var(--skew-deg));
    }

    .rey-coverSkew .coverSkew-slide {
      position: absolute;
      width: 100%;
      height: 100%;
      transform-origin: 100% 100% 0px;
      transform: skewX(calc(-1 * var(--skew-deg)));
    }

    .rey-coverSkew .coverSkew-slide.--active .coverSkew-slideBg {
      transform: skewX(calc(-1 * var(--skew-deg)));
    }

    .rey-coverSkew .coverSkew-slideInner {
      width: 100%;
      height: 100%;
      transform-origin: 0px 100% 0px;
      transform: skewX(var(--skew-deg));
    }

    .rey-coverSkew .coverSkew-slideBg {
      background-color: rgb(84, 84, 84);
      mix-blend-mode: multiply;
      width: 6%;
      height: 100%;
      position: absolute;
      transform-origin: 100% 100% 0px;
      right: 17.8%;
    }


  </style>
</head>
<body>
  <div class="rey-coverSkew">
    <div class="coverSkew-slides">
      <div class="coverSkew-slidesInner">
        <div class="coverSkew-slide --active">
          <div class="coverSkew-slideInner">
            <div class="coverSkew-slideBg"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>
Assignee: nobody → gwatson
Flags: needinfo?(gwatson)

Ensure that we only apply the mix-blend container -> tile cache
optimization in cases where we know the transform on the blend
container is axis-aligned.

Set release status flags based on info from the regressing bug 1684781

status-firefox88: --- → affected
status-firefox89: --- → affected
status-firefox90: --- → affected
status-firefox-esr78: --- → unaffected
Pushed by gwatson@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/2f4df00f1a4e
Fix blend container + complex transform optimization r=gfx-reviewers,jnicol

https://hg.mozilla.org/mozilla-central/rev/2f4df00f1a4e

Status: NEW → RESOLVED
Closed: 3 years ago
status-firefox90: affected → fixed
Resolution: --- → FIXED
Target Milestone: --- → 90 Branch
Has Regression Range: --- → yes
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: