Images in WordPress have a ‘duotone’ setting, which allows you to recolor photos with a color for the shadows and a color for the highlights. All other color data is removed. It’s like a customizable sepia. But you probably know all this because it’s an overused look right now.
If you apply duotone to a cover block, and give it a fixed background, the combination causes a judder in Safari for every fixed-background cover block on the page.
If you’re using Safari now, you should see the effect in these two red/orange Cover Blocks, unless a WordPress update has fixed the issue.
The problem can be solved with a bit of CSS (see below). Adding a clip path to the Cover Block, and adding some settings to its child elements settles down the judder on scroll. This change affects the structure of the way the Cover Block deals with the image, so it’s possible the fix here will break future Cover Block functionality. If you’re on Safari, the two green Cover Blocks below should move smoothly.
.judder-free {
clip-path: inset(0);
}
.judder-free > .wp-block-cover__image-background.has-parallax {
background-attachment: scroll !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
}
Leave a Reply