Forum

Thread tagged as: Question, Problem, Error

Strange image swapping behaviour

I have a very weird issue with a current build. On some devices various images are being displayed in totally the wrong area, its like they have been swapped with each other. For example I am using perch layouts to provide my footer. Within the footer are a bunch of social icons, these are hard coded so NOT perch elements. Above that on the home page I am using slick slider for a carousel. Randomly on one users iPad one of the social icons appears in the carousel and the carousel image is in the footer as a tiny image alongside the social icons! Very weird! Whats stranger is that on my laptop and mobile it all looks absolutely fine.

I have actually seen this same behaviour on another perch build but as the elements swapping were all Perch regions I put it down to user error on the part of the clients. Now I'm not so sure...

Here is the staging domain:https://inarainteriors.floatingharbour.co.uk/

Diagnostics:

Perch: 2.8.13, PHP: 5.5.0, MySQL: 5.5.25, with PDO
Server OS: Linux, cgi-fcgi
Installed apps: content (2.8.13), assets (2.8.13), categories (2.8.13), perch_forms (1.8.3), perch_blog (4.6), perch_mailchimp (2.0.1)
App runtimes: <?php $apps_list = array( 'content', 'categories', 'perch_blog', 'perch_mailchimp', 'perch_forms' );
PERCH_LOGINPATH: /admin
PERCH_PATH: /home/floating/public_html/inarainteriors/admin
PERCH_CORE: /home/floating/public_html/inarainteriors/admin/core
PERCH_RESFILEPATH: /home/floating/public_html/inarainteriors/admin/resources
Image manipulation: GD
PHP limits: Max upload 128M, Max POST 8M, Memory: 128M, Total max file upload: 8M
Resource folder writeable: Yes
DOCUMENT_ROOT: /home/floating/public_html/inarainteriors
HTTP_HOST: inarainteriors.floatingharbour.co.uk
REQUEST_URI: /admin/core/settings/diagnostics/
SCRIPT_NAME: /admin/core/settings/diagnostics/index.php

Footer layout:

</div><!--/page__content-->
<div class="footer layout--full clearfix">

  <div class="footer__social">
    <ul>
      <li><a href="https://www.facebook.com/Inara-Interiors-273818399342729/"><img src="/a/img/socials/facebook.png" alt="Inara Interiors Facebook" /></a></li>
      <li><a href="https://twitter.com/inarainteriors"><img src="/a/img/socials/twitter.png" alt="Inara Interiors Twitter"/></a></li>
      <li><a href="https://www.linkedin.com/pub/dawn-pirie/16/340/856"><img src="/a/img/socials/linkedin.png" alt="Inara Interiors LinkedIn"/></a></li>
      <li><a href="https://uk.pinterest.com/inarainteriors/"><img src="/a/img/socials/pinterest.png" alt="Inara Interiors Pinterest" /></a></li>
      <li><a href="https://www.houzz.co.uk/pro/inarainteriors/inara-interiors-limited"><img src="/a/img/socials/houzz.png" alt="Inara Interiors Houzz" /></a></li>
      <li><a href="https://www.homify.co.uk/professionals/4261/inara-interiors"><img src="/a/img/socials/email.png" alt="Inara Interiors Homify" /></a></li>
      <li><a href="https://plus.google.com/104677454551280896736/posts"><img src="/a/img/socials/googleplus.png" alt="Inara Interiors Google Plus"/></a></li>
    </ul>
  </div><!--/social-->

  <div class="footer__credits">
    <a href="/credits" <?php if(perch_layout_var('credits','true')) { echo " class=\"currentpage\""; }?>>Credits</a> <a href="/legal" <?php if(perch_layout_var('legal','true')) { echo " class=\"currentpage\""; }?>>Legal</a>
  </div><!--/credits-->

</div><!--/footer-->

Slider template:

<div class="block block__carousel">
  <perch:repeater id="carousel" label="Carousel Images">
    <div>
      <img src="<perch:content type="image" id="image" label="Image" width="1500" height="486" bucket="carousel" help="Images MUST be at least width:1500px height:486px." />" alt="<perch:content type="text" id="alt" label="Description" required="true" help="Alt tag/description for screen readers and search engines. IMPORTANT FOR SEO!" />" />
    </div>
  </perch:repeater>
</div><!--/carousel-->
Rob Saunders

Rob Saunders 0 points

  • 6 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

If this is only happening on some devices it isn't a Perch issue as Perch doesn't insert CSS or JavaScript into the front-end of your site nor do we attempt any device detection. If you have some JavaScript running then it is possible the behaviour comes from that.

Ok thats great to know...thanks for the reply.