Try: Safari flickering fix round 3. #32575
Closed
Conversation
This file contains 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
jasmussen
added
the
Browser Issues
This was referenced Jun 10, 2021
|
Size Change: +71 B (0%) Total Size: 1.03 MB
ℹ️ View Unchanged
|
|
Here are what the extra compositing layers look like on your branch. Memory usage looks okay on that test post, but we'll want to be careful that we don't create too many layers. branch.mp4Here's what it looks like on trunk: trunk.mp4We don't see this behavior in the site-editor since iframes are always composited by browsers. (And anything on top of a compositing layer will also be composited. ) So two leads I'm looking into for why this happens on trunk:
|
|
Does this work for folks? I think it might be from the |
|
🤔 I still see the black tearing with my safari browser fullscreen (easy to see on the Gutenberg demo post while using a monitor). Maybe the layers get too large at that point. |
|
Tentatively closing this one as fixed by #32824 🎉 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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
Fixes #30803. Safari has occasional flickering when scrolling fast, or scrolling a gallery. It appears to be related to a combination of fixed-position, z-index, and updating top/left properties of elements. But it may also just be a general performance issue. Here's how it looks:
This PR forces 3 layers onto the GPU, fixing the issue:
It would be nice to explore separate improvements, that make these changes unnecessary, as this change might cause higher memory usage. But this patch may also be a good temporary bandaid, and I have added comments that suggest as much.
One of the downsides of putting items on the GPU is that they can affect how relative positioning, fixed positioning, or overflow behave. So as you test this, outside of the performance, be sure to look for anything that's clipped or cropped, or incorrectly positioned. As far as I can tell, there are no downsides.
One theoretical upside is smoother animation, as the layers are now rendered on the GPU.
How has this been tested?
Here's some test content:
Scroll that up and down very fast, ideally in a classic theme that does not provide an editor style. Also try selecting an image in the gallery, then scroll down until the toolbar detaches.
Checklist:
*.native.jsfiles for terms that need renaming or removal).