Try: Fix overlay blur flickering. #55032
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
|
Warning: Type of PR label error To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. |
|
Size Change: -24 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
|
Thanks for the PR!
I first tested this by inserting only a full-width Image block and a Post Featured Image block in the Site Editor.
Image Block
Post Featured Image Block
Screencasttrunktrunk.mp4this PRpr.mp4These test results may vary depending on OS and browser. @carolinan @ndiego @glendaviesnz If you have time, could you please test this PR? |
jasmussen
commented
Oct 4, 2023
| @@ -3,7 +3,7 @@ | |||
| .wp-block-post-featured-image { | |||
| .block-editor-media-placeholder { | |||
| z-index: 1; // Need to put it above the overlay so the upload button works. | |||
| backdrop-filter: none; // Removes background blur so the overlay's actual color is visible. | |||
| //backdrop-filter: none; // Removes background blur so the overlay's actual color is visible. | |||
There was a problem hiding this comment.
In case this PR moves forward, want to remove this one. (Note to self)
|
Thank you for the thorough test! And ack, sorry it introduced new headaches. I created #55034 as an alternative, that's much simpler, and ignores Featured Image for now. Essentially the "fix" is to add margin to the feature placeholder, so it ideally never touches the edges of the frame. Please feel free to push directly to that branch, or create an alternative, if you like. I have to shift gears for a bit. |
|
Closing this as unfortunately the fix didn't work. |
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.
What?
Attempts to fix #52313.
As explained in #52313 (comment), blur is complicated, and surroundings affect the blur inside. This can cause flickering.
This PR fixes it by applying a 1px margin around the entire blurred placeholder, so that it should be "spared" from those surroundings bleeding in.
Before:
After:
Note, however, that this also tweaks CSS from #43838 which, according to comments in the code, disabled the backdrop filter for just the featured image placeholder in order for the overlay to work. There were also visual glitches due to how the overlay borders affected this in the site editor:
I missed this aspect initially and it's really not ideal to have the backdrop filter just for some placeholders, not for others, so I took a very hacky approach to get that working here. To that end, please review the CSS and follow the test instructions clearly. That said, the hack works for me and ensures that:
Testing Instructions