Text on hatchboxnz.com clipped differently in Firefox than Chrome
Categories
(Core :: Layout, defect, P3)
Tracking
()
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).
Comment 1•5 years ago
|
||
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•5 years ago
|
||
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 4•5 years ago
|
||
Updated•5 years ago
|
Updated•5 years ago
|
Description
•