fix(AccessKit Disable GIFs): Remove small flicker on first hover on certain elements - #2293
Draft
marcustyphoon wants to merge 1 commit into
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
Currently, there's a slight flicker effect the first time you hover a GIF on https://www.tumblr.com/communities/browse if you have soft navigated to that page (observed in Firefox; have not yet tested in Chrome).
This is probably because we synchronously change the background-image property during initial processing, so the browser does not immediately begin to render the animated image as the background of the element in question. This is kind of like what #1853 did on purpose to prevent the animated source from being downloaded until the user hovers the element. In this case, we're immediately fetching the animated source ourselves anyway, so there's no bandwidth benefit; the only result of this is that the user hover is the first time the image is rendered (and to my knowledge there's no equivalent of
gifElement.decoding = 'sync';for background-image css, so this causes a brief flicker of no image being displayed).The fix is to intentionally not initially process background-image gifs synchronously, making the browser fire the load process with the regular animated
background-imagevalue (even though by the time it would result in any visible effect, we've changed the value to something else). Then, when the user hover switches it back to the regular value, the processing has already been done and the switch is instant.Screenshots
Testing steps