WordPress 6.7 has introduced a new feature that leverages the contain-intrinsic-size CSS property to improve lazy loading and rendering performance for images. While this enhancement aims to enhance user experience, many users have reported unexpected issues with image resizing in popular browsers like Chrome, Opera, and Firefox.
The Problem
Browsers utilizing the contain-intrinsic-size property may encounter a problem where images do not resize properly. This can lead to distorted layouts and broken designs, especially on sites with custom image sizes or responsive designs. The issue primarily affects themes and plugins that rely heavily on precise image dimensions.
Browsers Affected
The problem is most noticeable in:
- Chrome: Google’s browser, known for its aggressive optimization of web content.
- Opera: A browser built on the Chromium engine, inheriting similar behavior.
- Firefox: Though not Chromium-based, it has also shown similar resizing glitches due to its support for the CSS property in question.
The Temporary Fix
Until WordPress or browser vendors address this issue, users can rely on a workaround by disabling the lazy loading feature altogether. The plugin Disable Lazy Loading offers an easy-to-implement solution:
- Install the Disable Lazy Loading plugin from the WordPress repository.
- Activate the plugin to turn off lazy loading for all images on your site.
This fix disables the lazy loading feature introduced in WordPress, ensuring that images load and resize without interference from the contain-intrinsic-size property.
Steps to Install the Plugin
- Log in to your WordPress Dashboard.
- Navigate to Plugins > Add New.
- Search for “Disable Lazy Loading.”
- Click Install Now, then Activate.
A Word of Caution
While disabling lazy loading resolves the resizing issue, it may slightly impact your site’s loading speed, especially on image-heavy pages. However, this trade-off is worth it for sites where proper image rendering is critical.
What’s Next?
The WordPress team is aware of the issue and may release a patch in an upcoming update. Browser vendors may also adjust their implementations of the contain-intrinsic-size property to improve compatibility. In the meantime, the Disable Lazy Loading plugin provides a reliable stopgap solution for affected websites.
By keeping your WordPress core and plugins updated, you can stay ahead of any permanent fixes for this issue. Until then, this simple workaround ensures your site maintains its visual integrity across major browsers.