1714332 - CSS "clip-path" glitches on high-res Macs

Status: RESOLVED DUPLICATE of bug 1707154

(Core :: Graphics, defect, P3)

Description

[valerian.tschopp]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

If you use "clip-path" on high-res Macs (Retina 5K, 27-inch, 2020) the clipped element starts glitching at 2048px width.

• Open "https://css-tricks.com/" (not my site but it's the same bug)
• Scroll the gradient background out and in

Actual results:

Background starts glitching (artifacts appear).

Expected results:

The CSS "clip-path" property should work as expected and a wavy background should be visible.

Comment 1

[BugBot [:suhaib / :marco/ :calixte]]

The Bugbug bot thinks this bug should belong to the 'Core::Layout' component, and is moving the bug to that component. Please revert this change in case you think the bot is wrong.

Comment 2

[Jonathan Kew [:jfkthame]]

I don't have a 5K/27" display to reproduce this locally, but in general I don't think Layout should care about the 2048px (or 4096 device pixels) width here - this sounds more like a Graphics issue to me.

Comment 3

[Brad Werth [:bradwerth]]

Thank you for posting. We might be hitting a 4K texture size limit. Can you please attach a video of the problem? Also it would help to have a more specific URL that shows the problem -- the css-tricks page doesn't have an obvious background gradient.

Comment 4

[Jonathan Kew [:jfkthame]]

I get different content on the front page of css-tricks today than I did yesterday, so it may be we're not seeing what the reporter was referring to at all. Could you give an example of a specific, static site where the issue occurs? (I'm guessing this will actually turn out to be the same as bug 1719522.)

Comment 5

[valerian.tschopp]

Attachment: Current result

Actual result.

Comment 6

[valerian.tschopp]

Attachment: Wanted result

Wanted result (fixed in Firefox Developer Edition 90.0b7).

Comment 7

[valerian.tschopp]

(In reply to Brad Werth [:bradwerth] (PTO until July 16) from comment #3)

Thank you for posting. We might be hitting a 4K texture size limit. Can you please attach a video of the problem? Also it would help to have a more specific URL that shows the problem -- the css-tricks page doesn't have an obvious background gradient.

I added screenshots and will add the corresponding HTML and CSS files. The issue was recently fixed with FF Dev. 90.0b7 - so everything should be working again.

Comment 8

[valerian.tschopp]

Attachment: HTML file

Comment 9

[valerian.tschopp]

Attachment: CSS file

Comment 10

[Jonathan Kew [:jfkthame]]

This was fixed by bug 1707154.