1580927 - CSS class change involving opacity gives ghosted images

Status: RESOLVED DUPLICATE of bug 1574838

(Core :: Graphics: WebRender, defect)

Description

[izacthewhite80]

Attachment: css-class-error.html

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

I have 16 images with class .product-viewer-img as children of a div with class .product-viewer. Then I use js to add and remove an .active class that changes the opacity from 0.001 to 1. The class swap happens based on a mouse click and drag across the component. This worked fine until I updated to Firefox 69 and I tried it in a beta of 70 and it seems to be fixed. See classes below.

.product-viewer .product-viewer-img {
display: block;
width: 100%;
position: absolute;
top: 3em;
left: 0;
opacity: 0.001;
}
.product-viewer .product-viewer-img.active {
opacity: 1;
}

Actual results:

When I click and drag across the component the images ghost or only show the top third as the class changes. Then when I release the mouse it takes a couple seconds to catch up and finally display the correct image.

Expected results:

In IE11, Edge, Chrome, Firefox <68 the swap of classes is seamless and each image is shown and hidden correctly with not ghosting or lag. The effect simulates a 360 turn of a product.

Comment 1

[Pablo]

Hi
I tried to reproduce the issue using Firefox Nightly version 71.0a1 on Windows 10 64bit

What i did was to open the html attached, then i click on the mouse button and move the mouse horizontally. I see all images and there is no slowdown.

Please download Firefox Nightly from here: https://nightly.mozilla.org/ and retest the problem.

If you still have the issue please create a new profile, you have the steps here:https://support.mozilla.org/en-US/kb/profile-manager-create-and-remove-firefox-profiles?redirectlocale=en-US&redirectslug=Managing-profiles#w_starting-the-profile-manager

Lastly test if the issue is reproducible in safe mode, here is a link that can help you:
https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode

Regards
Pablo

Comment 2

[Emilio Cobos Álvarez [:emilio]]

I couldn't repro it on 69 either, which is weird...

Given you say this is fixed on 70, is there any chance you could use mozregression to see what fixed it? We should definitely add a test if we don't have one covering it.

I'd run it like:

mozregression --bad 69 --good 70 --find-fix

Comment 3

[Hiroyuki Ikezoe (:hiro)]

izacthewhite80, can you please run mozregression as Emilio commented?

Comment 4

[izacthewhite80]

Sure. I will give it a try. In the last couple days I have published the component on our website. It might be easier to see the error there. The url is below and it is the 360 image viewer in the middle of the page with the title "Ramp Vision." I will comment again after I run the test. Thanks for your help.

https://cessna.txtav.com/en/citation/longitude

Comment 5

[izacthewhite80]

I ran the mozregression tool and found the below info. Thanks

app_name: firefox
build_date: 2019-08-20 03:04:11.462000
build_file: C:\Users\c41448.mozilla\mozregression\persist\6b6d05d2d550-shippable--autoland--target.zip
build_type: inbound
build_url: https://queue.taskcluster.net/v1/task/Gb_0FAVHTieBD1xhLJsWqA/runs/0/artifacts/public%2Fbuild%2Ftarget.zip
changeset: 6b6d05d2d55007ae3f470ee7b1db848651a2e4ac
pushlog_url: https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=14bd73fd1e01022663fe79675d1273defeb52ef0&tochange=6b6d05d2d55007ae3f470ee7b1db848651a2e4ac
repo_name: autoland
repo_url: https://hg.mozilla.org/integration/autoland
task_id: Gb_0FAVHTieBD1xhLJsWqA

Bug 1574838 - Allow generating dirty regions from picture caching dependency lists. r=kvark

Previously, additional dependencies (such as opacity bindings and
transforms) were stored in a simple hash set, which meant they
could not be correlated with primitive bounding rects (and thus
could not be used to derive dirty rects of a tile).

Now, by scanning the primitive list which contains the bounding
rect, we can also find additional dependencies for that primitive.
This will be used in future to create exact dirty rects (for
debugging / regression testing) and allow us to generate a
dependency descriptor for a split or merged tile from an existing
descriptor.

This patch also fixes a case where opacity bindings could result
in unnecessary invalidations, by retaining the opacity bindings
state across display lists.

Differential Revision: https://phabricator.services.mozilla.com/D42473

2019-09-25T08:12:42: DEBUG : Did not find a branch, checking all integration branches
2019-09-25T08:12:42: INFO : The bisection is done.
2019-09-25T08:12:42: INFO : Stopped

Comment 6

[Emilio Cobos Álvarez [:emilio]]

Thanks!

Comment 7

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

The component has been changed since the backlog priority was decided, so we're resetting it.
For more information, please visit auto_nag documentation.

Comment 8

[Emilio Cobos Álvarez [:emilio]]

Err, sorry.