Relative Position set to Images in Tablet/Mobile Preview

Description:

I upgraded to WP 6.1 today and the Gutenberg editor appears to now apply a Position: Relative to images in Tablet/Mobile Preview - which I noticed b/c I am using absolute positioned images (via global class settings) for srcset background in a DIV on my site. In Desktop preview, there is no issue - but when switching to tablet and mobile a class is added by the editor to change the position setting. I believe this is related to WP 6.1 bc I did not notice this behavior before today. This can be overcome by setting the positioning on the Image element ID itself - but if applying via Global Class - it gets overridden.

Step-by-step reproduction instructions:

  1. Create a DIV - set to position relative
  2. Add image inside DIV
  3. Create Global Class and apply to Image
  4. Apply the following settings to the Global Class:
    background-size: cover;
    background-repeat: no-repeat;
    top: 0px;
    left: 0px;
    z-index: -1;
    position: absolute;
    height: 100%;
    width: 100%;
  5. Add Heading insid DIV
  6. Preview in Tablet and Mobile (see results below)

Desktop

Tablet

Inspector showing this position being overridden:
image

Insert Images, Videos or GIFs

Environment info

  • WordPress version: 6.1
  • Gutenberg Plugin version: -
  • Cwicly Plugin version: 1.2.5.2.1
  • Cwicly Theme version: 1.0.3

Hi @bmc38119,

Indeed, I was able to reproduce this issue on my end.
Moving this to confirmed bugs.

Please bear with us while we find a fix for this.
Thank you for reporting this and sorry for the inconvenience.

Hi @bmc38119,

Thanks taking the time to report.
This should be fixed in 1.2.6.

If you still experience trouble with this, please let me know by replying to this thread.

Cheers,