Slideshow block: The block shakes/vibrates/flickers

[zdenys]

Steps to replicate

1. On a Simple site, add a Slideshow Block with a few images to a Page.
2. Preview the page on the front end

https://user-images.githubusercontent.com/39308239/109952086-1fef5400-7ce7-11eb-9367-e97cd2a3722d.mov

Result

Slideshow block shakes/vibrates/flickers.

Expected

See no vibration/shaking/flickering

Browser

Chrome 88 on macOS Big Sur 11.1 Brave 1.21.73 on macOS Big Sur 11.1 ~Safari~

Additional context

So far I was only able to reproduce on Simple site with Blask theme. This was reported by various users, using different themes, on Simple and Atomic sites, using different browsers. The only common thing to all cases so far is that it's happening specifically for the Slideshow block, but we cannot reproduce all the cases consistently. So maybe it needs to be addressed at the Slideshow block level, not theme level.

Cases

Type	ZD	Theme	Browser
Simple	2070363-zd-woothemes	Blask	Chrome/Brave
AT	3781809-zd-woothemes	Appetite	Chrome/Firefox/IE
AT	3788550-zd-woothemes	Pique	Chrome

[automattic-ian]

Since this is impacting multiple themes transferring to calypso repo.

so far it impacts Pique, Blask, and Appetite. Does not seem to impact Default theme Twenty Twenty One.

[automattic-ian]

I have one user report of additional image blocks being impacted, including the regular gallery block but so far have been unable to reproduce.

[edwinho89]

From this forum topic, there was a suggestion to add the following code into theme's functions.php

add_action( 'enqueue_block_editor_assets', function() {
    wp_add_inline_style( 'wp-block-editor', '.edit-post-sidebar { overflow-y: scroll; }' );
} );

(ran a test AT site with Pique theme on the above, still flickers for me)

[kwight]

@edwinho89 From what I can tell, that code would only apply to the editor, and this issue is about display on the site's front-end (I can't replicate it in the editor myself).

This seems to be a rendering issue with the width of the slideshow being determined by a parent element using floating-point percentages for width. For instance, Blask has a content width at its widest of 72.72% – adjusting the width off of that number (either through the width of the window, or through devtools) will stop the jitter. This would mean the situation only happens at full width on desktop, and only for themes that don't use full percentages for their content.

The Slideshow block itself has no unusual width use or unexpected constraints; I'd say this is a fix for each theme, adjusting their entry-content width to be integers, rather than fractional percentages.

[ianstewart]

I'd say this is a fix for each theme

Moving this back to the Themes repo.

[pauljacobson]

We have a similar report in 3944450-zen where the user tested this on an iOS device, both in Safari and Chrome. Clearing the browser cache didn't help with this. The user is using the Appetite theme.

I wasn't able to reproduce this in Chrome or Firefox on my Android 10 device.

https://user-images.githubusercontent.com/2912202/119318022-7bdfce00-bc81-11eb-859a-a248ef026a45.MP4

[the-misha]

I have a similar report in 4045623-zd-woothemes. The site is using the Goodz Magazine theme. I was unable to reproduce this in Chrome or Safari.

[kriskarkoski]

4067609-zen returned to ask about the status of this

[the-misha]

Coincidentally, 4045623-zd-woothemes also just emailed to request a status update, too.

[AtrumGeost]

We got another report here:

30295484-hc

The user was on Chrome. I wasn't able to reproduce the issue on my end

[marianearchimbaud]

Another report here: 31545210-hc Theme Baskerville 2

I was able to reproduce this issue on Chrome: https://d.pr/v/C57Dh1

[jordesign]

Triaging this to bring some clarity - and summarise the previous comments. This is an issue that effects multiple themes based on the way they handle the width of content areas:

This seems to be a rendering issue with the width of the slideshow being determined by a parent element using floating-point percentages for width. For instance, Blask has a content width at its widest of 72.72% – adjusting the width off of that number (either through the width of the window, or through devtools) will stop the jitter. This would mean the situation only happens at full width on desktop, and only for themes that don't use full percentages for their content.

The Slideshow block itself has no unusual width use or unexpected constraints; I'd say this is a fix for each theme, adjusting their entry-content width to be integers, rather than fractional percentages.

• @kwight

---

As this effects multiple themes - we may need to prioritize based on theme usage:

o Pique (2,083,646) o Baskerville 2 (645,326) o Blask (219,750) o Goodz Magazine (retired) o Appetite (retired)