Closed Bug 1539698 Opened 5 years ago Closed 5 years ago

Text on hatchboxnz.com clipped differently in Firefox than Chrome

Categories

(Core :: Layout, defect, P3)

defect

Tracking

()

RESOLVED DUPLICATE of bug 1323962

People

(Reporter: cpearce, Unassigned)

Details

Attachments

(2 files)

Open https://hatchboxnz.com/ in Firefox, and you'll see the text in the "think outside the egg" bubble being clipped on the right hand side. In Chrome it renders without being clipped.

Tested in today's Nightly on Win10 x64 and on MacOS (WebRender disabled).

The clipping is applied via an ancestor <div class="gallery"> which has clip-path: url(#clip).

You can visualize the clip area by giving that element "background: lime". Here's a screenshot of that in Chrome vs. Firefox.

It looks like the clip-path has a slightly different position/size in Chrome vs. in Firefox -- in Chrome, it's roughly the exact size and shape as the white egg area, whereas in Firefox, it's a bit smaller than the white egg area and it's offset to the upper left.

There's a CSS rule that applies a transform to the clipping path itself (where the scaleX/scaleY are the most relevant parts):

#clip {
  transform: scaleX(1.175) scaleY(1.175) translateY(-1px) translateX(-1px);

That CSS rule applies to this clipPath element:

<svg width="0" height="0">
  <defs>
    <clipPath id="clip">
      <path id="Path_11" class="st0" d="M671.3,139.6C603.9,7.1,445.1-47.2,253,50.6C45.1,156.6-34.9,380,13.4,474.8c51.9,101.9,273.1,163,484,55.5C689.5,432.5,738.8,272.1,671.3,139.6"></path>
    </clipPath>
  </defs>
</svg>

In Chrome, the transform does actually affect the size/position of the clipping area. In Firefox, it does not.

I think this is a version of bug 1323962.

Depends on: 1323962
Attached file testcase 1
Priority: -- → P3
Status: NEW → RESOLVED
Closed: 5 years ago
No longer depends on: 1323962
Resolution: --- → DUPLICATE
You need to log in before you can comment on or make changes to this bug.