Try: fix Safari flickering issues. #31412
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
ellatrix
reviewed
May 3, 2021
| @@ -126,4 +126,15 @@ | |||
| cursor: revert; | |||
| transform: revert; | |||
| } | |||
|
|
|||
| // Safari can have renderint issues with CSS3 transitions. | |||
There was a problem hiding this comment.
What is renderint? And which CSS3 transition is causing this? The block moving one?
There was a problem hiding this comment.
Sorry, typo, "rendering".
I'm not entirely sure which property is causing the issue, and I was hoping that by starting this PR (since it seems to fix the issue for me) as a good way get the conversation going.
In my testing, the flickering happens mostly on the classic gallery buttons (left/right/remove), while you are scrolling:
But according to the initial ticket, it appears to be happening to other blocks as well.
|
Size Change: +64 B (0%) Total Size: 1.31 MB
ℹ️ View Unchanged
|
|
I'm still seeing some flicker/rendering issues, using test content similar to that supplied in #30803. 😞 Kapture.2021-05-03.at.09.41.08.mp4 |
|
Thank you for the test content. Just to be sure, you're referring here to the fixed position background of the cover block, correct? The choppiness?
I see that, and will investigate. But it seems like an additional issue to some of the more jarring flickering I see in videos on #30803, does that seem right? As in, the text popping in and out of existing, or the toolbar blinking, that seems gone in this branch on my end. |
|
Specifically, it appears Safari has relatively poor support for @kjell if you disable the fixed background, do you still see flickering? Because I think we've got those two separate issues going on, and the fixed background is apparently an old issue with Safari. One we should fix, absolutely, but maybe separately. |
|
@jasmussen Good news! I tested again with the expanded test content in this comment (but with the background un- I do still see the background glitching from before when the cover background is Trunk: safari-2.mp4This PR: safari-3.mp4 |
|
Yeah I do think the background glitching is something we need to find a solution for. I feel like the fact that the Cover block was recently refactored to use an Image element in most cases might let us use |
kjellr
reviewed
May 4, 2021
| // by keeping the prefixes we're reminded that this is a hack. | ||
| /* eslint-disable property-no-vendor-prefix */ | ||
| -webkit-perspective: 1; | ||
| -webkit-backface-visibility: none; |
There was a problem hiding this comment.
@jasmussen in my testing, this doesn't even get picked up. Are you sure it's necessary?
There was a problem hiding this comment.
It looks like none isn't a supported value here. But this PR seems to work fine without this rule anyway, so maybe we can just remove it?
There was a problem hiding this comment.
Wild, so it seems like just adding that perspective is enough. I would think it has the same effect as adjacent properties — telling the browser to render it on the GPU — but from the initial piece I read about it suggested the backface property was needed as well. But yeah, if it works, we can remove it.
|
How is this coming along? The flickering is driving me nuts and I wish to keep using Safari for editing my websites. |
7 tasks
|
I'm happy to report that I think I found a fix in #32188. Please test that if you can, and I will close this one in favor of that. |
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
Hopefully/maybe fixes #30803.
Safari has trouble rendering elements that use CSS3 transitions. According to basic testing in this branch, and to this document, the attached hack should fix it.
Note that if this works, we should consider scoping the hack to just the blocks causing the issue, or somehow otherwise limiting it as best we can. While it seemed harmless in my testing, as far as I understand this changes the fundamental rendering method used for blocks, and if past experience tells us anything, it is that it a) makes it way more performant, and b) sometimes interferes with absolute or sticky positioning, especially in cases where you are intentionally applying
position: static;to a parent to inherit from an ancestor itself — this property might effectively applyposition: relative;.That's also a note to test #30047 with this.
How has this been tested?
Please test various blocks in the editor, in Safari. Select blocks, scroll, and verify that nothing flickers.
Blocks that commonly cause flickering appear to be the Gallery block, but sometimes also the pullquote, it's a bit unclear and also seems to depend on amount of blocks on the page. Using the demo content might be a good way to start.
Checklist:
*.native.jsfiles for terms that need renaming or removal).