Gutenberg Blocks: Media & Text "Crop to Fill Entire Column" not working in Safari and Chrome #35114
Open
Description
Steps to reproduce
Add a Media & Text block to a post or page, and enable the "Crop to Fill Entire Column" setting from the block options
What I expected
That the media in the block would be shown taking up the full dimensions of the column:
What happened instead
The image didn't fill the full column:
Browser / OS version
macOS 10.14.6, Safari 12.1.2/Chrome 75.0.3770.142
Context / Source
Reported in #14353586-hc, was able to duplicate on my test site
Issue doesn't appear to happen in Firefox -- this CSS wasn't appearing to be added to the block in Chrome and Safari, but I was able to provide it to the user to add in the Customizer to resolve the issue:
/* hide image in the media & text block when image fill is selected */
.wp-block-media-text.is-image-fill figure > img {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
/* make background full height on media & text block when image fill is selected */
.wp-block-media-text.is-image-fill figure {
height: 100%;
min-height: 250px;
background-size: cover;
}