Repository navigation
Horizontal scroll on mobile devices when picture tag is enabled (Modern Image Formats) #1918
Description
Bug Description
Hello. I have noticed that when I enable “Use picture Element (experimental)“ in the settings, the width of the site container is doubled and horizontal scrolling appears on mobile devices in the articles where this tag is inserted and Gutenberg lightbox is enabled for images. I was able to reproduce this bug not only in the theme I'm using, but also in the standard Wordpress Twenty Twenty Five template in the newly deployed Wordpress.
Steps to reproduce
- Enable the Modern Image Formats plugin
- Enable "Use picture Element (experimental)" and "Also generate fallback images in the original upload format" in Media settings
- Create Gutenberg post and insert an image, with Link setting - Expand on Click
- Publish a post on the site and proceed to view it
- Enable mobile device mode, such as Pixel 7 in Chrome Developer Tools
- The container is twice as wide as the content, there is a scroll bar at the bottom of the screen and when you tap on an image it opens to the full width of the container.
This is how it looks like if the picture tag option is turned off:
Here is the code that is inserted for image with the plugin enabled:
<figure data-wp-context="{"imageId":"67d010bcd9866"}" data-wp-interactive="core/image" class="wp-block-image size-full wp-lightbox-container">
<picture class="wp-picture-8" style="display: contents;">
<source type="image/webp" srcset="http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-jpg.webp 1000w, http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-300x200-jpg.webp 300w, http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-768x511-jpg.webp 768w" sizes="(max-width: 1000px) 100vw, 1000px">
<img fetchpriority="high" decoding="async" width="1000" height="666" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e.jpg" alt="" class="wp-image-8" srcset="http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e.jpg 1000w, http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-300x200.jpg 300w, http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-768x511.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px">
</picture>
<button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="Enlarge image" data-wp-init="callbacks.initTriggerButton" data-wp-on-async--click="actions.showLightbox" data-wp-style--right="state.imageButtonRight" data-wp-style--top="state.imageButtonTop" style="right: -336px; top: -218px;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z"></path>
</svg>
</button>
</figure>And here without it:
<figure data-wp-context="{"imageId":"67d017ae9421e"}" data-wp-interactive="core/image" class="wp-block-image size-full wp-lightbox-container">
<img fetchpriority="high" decoding="async" width="1000" height="666" data-wp-class--hide="state.isContentHidden" data-wp-class--show="state.isContentVisible" data-wp-init="callbacks.setButtonStyles" data-wp-on-async--click="actions.showLightbox" data-wp-on-async--load="callbacks.setButtonStyles" data-wp-on-async-window--resize="callbacks.setButtonStyles" src="http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-jpg.webp" alt="" class="wp-image-8" srcset="http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-jpg.webp 1000w, http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-300x200-jpg.webp 300w, http://testwp.local/wp-content/uploads/2025/03/c300dfa0cf518a9a5a9eb80e2c7e2e-768x511-jpg.webp 768w" sizes="(max-width: 1000px) 100vw, 1000px">
<button class="lightbox-trigger" type="button" aria-haspopup="dialog" aria-label="Enlarge image" data-wp-init="callbacks.initTriggerButton" data-wp-on-async--click="actions.showLightbox" data-wp-style--right="state.imageButtonRight" data-wp-style--top="state.imageButtonTop" style="right: 16px; top: 16px;">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" fill="none" viewBox="0 0 12 12">
<path fill="#fff" d="M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z"></path>
</svg>
</button>
</figure>Additional Context
- OS: Android 13
- PHP Version: 8.3
- Browser: Chrome 133, 134
- Performance Lab Version: 3.9.0
- Modern Image Formats Version: 2.5.0
- Device: OnePlus 8 Pro, Pixel 7 (Chrome Dev Tools)
Activity
westonruter commentedon Mar 11, 2025
Related: #1805
sanketio commentedon Aug 27, 2026
The
<picture>wrapper is the cause. Core'ssetButtonStylesreadsref.parentElement.clientWidth/clientHeight(view.js#L621-L628), but with Modern Image Formats the img's parent is<picture style="display: contents">, which generates no box — so both read0and the button getsright: -offsetWidth + 16, placing it outside the figure.Reproduced on WP 7.1 / Twenty Twenty-Five at a 500px viewport: button
right: -409px,scrollWidth864 vsclientWidth485. With the picture element off:right: 16px, no overflow.Two possible fixes:
ref.closest( 'figure' )instead ofref.parentElement. Fixes any plugin that wraps block images, but needs a core release.<picture>wrapper when the<img>carriesdata-wp-on--click="actions.showLightbox", rewritingsrc/srcsetinstead so the image still gets the modern format.Same root cause as #1805.
Disclosure: analysis and reproduction were done with AI tooling (Claude Code), reviewed and verified by me.
adamsilverstein commentedon Aug 27, 2026
This sounds like the most direct fix, making the Gutenberg styling more specific. I could also see it breaking some things.
Don't we need the picture element to get the browser fallback behavior?
sanketio commentedon Aug 31, 2026
You're right on the fallback — the non-picture path rewrites
src/srcsetin place with no<source>siblings, so lightbox images would lose the fallback. Withdrawing that option.On breakage: the button is
position: absoluteinside.wp-lightbox-container, which isposition: relative, so the figure is already the containing block the math assumes —parentElementis only standing in for it.ref.closest( '.wp-lightbox-container' )names it directly, is guaranteed present sinceblock_core_image_render_lightbox()adds the class, and resolves to the same node as today for unwrapped images.Separate from #70800, which fixes the hover selector but not the position.
adamsilverstein commentedon Aug 31, 2026
@sanketio can you open a follow up issue on the Gutenberg repository proposing this change? This would be the ideal fix and proposing it there will provide an opportunity to receive feedback about the idea.
sanketio commentedon Sep 1, 2026
Opened WordPress/gutenberg#82283.