1539698 - Text on hatchboxnz.com clipped differently in Firefox than Chrome

Status: RESOLVED DUPLICATE of bug 1323962

(Core :: Layout, defect, P3)

Description

[Chris Pearce [:cpearce (Not reading bugmail)]]

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).

Comment 1

[Daniel Holbert [:dholbert]]

Attachment: screenshot comparing Chrome (left) to Firefox (right) with a lime background added to the clipped ancestor

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.

Comment 2

[Daniel Holbert [:dholbert]]

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.

Comment 3

[Daniel Holbert [:dholbert]]

I think this is a version of bug 1323962.

Comment 4

[Daniel Holbert [:dholbert]]

Attachment: testcase 1