Themetastic images load then disappear on Safari

Posted on: March 24, 2016

Written by: Mick Sherry

The Themetastic WordPress theme from the good people over at ThemePunch (formerly Damojo)is a very flexible theme that is one of my favourites to use for custom wordpress sites.

During my first time using this theme to create a website for a client, I stumbled across a strange problem that left me scratching my head at first.

The Problem

The issue was that whenever I loaded the client website on any apple devices, all of the sites images would load and stay on screen for a second and then they would disappear and break leaving behind boxes of alternate text.

After more testing what I found was that it was actually the Safari web browser that was having difficulties with a feature within the Themetastic framework. A Javascript plugin called retina.js which worked to detect if the website was being viewed using a retina screen that it would detect the images and replace them with a higher resolution image file of the same name with the suffix of @x2.

For example:

If the image file name was logo.png, the script would search your image gallery for a file named logo@x2.png and display it on retina screens.

The script was also supposed to leave the original image if there was not an @x2 labelled file with which to replace the original image.

The Work-Around

For me, my client was not worried about how the images were going to appear on retina screens. The easiest way to get around the issue was to disable the retina.js function. This can be done easily by:

  1. Navigating to: wp-content/themes/themetastic/functions/theme_javascriptcss.php
  2. Find (ctrl+f) the line that says: wp_enqueue_script(‘themetastic_retina_script’, themetastic_JAVASCRIPT.”/retina.js”, array(‘jquery’),false,true); and comment it out.
  3. After commenting it out, the line should read: //wp_enqueue_script(‘themetastic_retina_script’, themetastic_JAVASCRIPT.”/retina.js”, array(‘jquery’),false,true);

Note: Even though the filename is ‘themejavascriptcss’ the extension is .php which is why we use the double forward slash // to comment out a single line in PHP.

Now reload your website in Safari and your images should be loading and remaining visible on the page.