Joomla! 3.8.0 Srcset Attribute Bug - HotThemes

We discovered a bug in Joomla! 3.8.0 which may cause problems with loading of images on high density screens (retina). This article explains how to fix it temporarily until it's fixed in the next Joomla! release. This is a very nasty bug because it can be seen only if user is viewing your site on a high density screen (retina).

Almost all of our newer templates use srcset attribute to define high resolution image along with normal resolution image. If the high resolution image is available, it is loading on high density screens (retina) rather than normal resolution image. This is done by Retina Image plugin which is part of the Sparky Framework. Also, this feature is included in some parts of our framework, such as logo image, etc.

After you upgrade your site to Joomla! 3.8.0, all images that exist in two resolutions (normal and high) and that use srcset attribute will not be displayed properly on high density screens (retina). The images will be displayed properly on normal resolution screens.

How to fix the bug

We believe this bug would be fixed in the next release of Joomla. Until then, you can fix it yoursef. Edit file /plugins/system/sef/sef.php and (around line 143) change this line:

$data[] = preg_replace('#(?!/|' . $protocols . '|\#|\')([^\s]+)\s+(.*)#', $base . '$1 $2', $url);

with this line:

$data[] = preg_replace('#^(?!/|' . $protocols . '|\#|\')(.+)#', $base . '$1', $url);