0

I have an issue where my images are not showing in incognito mode while on a default browser it was showing fine. When I took a look into the code this was what it shows. enter image description here

However in my html and js I've never implemented anything to manipulate my image visibility. Could someone please explain how this happened and what I should do to prevent it?

here's the html

<section class="app-flow position-relative" id="app_flow">
 
   <div class="col-md-5 position-relative flowsub-1-bg">
    <img class="img-fluid animated wow slideInLeft phone-eg" src="{{ asset('img/landing/flow1-1.png') }}" title="flow1-1" alt="flow1-1">
    <img class="img-fluid position-absolute d-none d-md-block" src="{{ asset('img/landing/flow1-2.png') }}" title="flow1-2" alt="flow1-2">
   </div>
  </div>
  <div class="flow-sub d-flex flex-column flex-md-row justify-content-between">
   <div class="d-flex flex-column col-md-5 app-flow-instruct">
    <h4>Display 1</h4>
    <p>Initial stage of setting up</p>
    <div class="appflow-icon">
     <img class="img-fluid" src="{{ asset('img/landing/flow1-icon.png') }}" title="flow1-icon" alt="flow1-icon">
    </div>
   </div>
   <div class="col-md-5 position-relative flowsub-2-bg">
    <img class="img-fluid animated wow slideInRight phone-eg" src="{{ asset('img/landing/flow2-1.png') }}" title="flow2-1" alt="flow2-1">
    <img class="img-fluid position-absolute wow slideInRight d-none d-md-block" src="{{ asset('img/landing/flow2-2.png') }}" title="flow2-2" alt="flow2-2">
    <img class="img-fluid position-absolute wow slideInRight" src="{{ asset('img/landing/flow2-3.png') }}" title="flow2-3" alt="flow2-3">
   </div>
  </div>
  <div class="flow-sub d-flex flex-column flex-md-row justify-content-between">
   <div class="d-flex flex-column col-md-5 order-md-3 app-flow-instruct">
    <h4>Display 2</h4>
    <p>Phase 2 of initiation</p>
    <div class="appflow-icon">
     <img class="img-fluid" src="{{ asset('img/landing/flow2-icon.png') }}" title="flowflow2-icon" alt="flow2-icon">
    </div>
   </div>
  </div>
 </div>
</section>

and my js

$(function () {
  new WOW().init();

  $('video').on('click touch', function () {
    this.paused ? this.play() : this.pause();
  });

  $('input').focusout(function (e) {
    /*check if val length is empty, or if type is email and does not contain @ and .*/
    if ($(this).val().length < 1 || ($(this).attr('type') == "email" && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test($(this).val()))) {

      $(this).parent().find('.message').show();
      $(this).parent().addClass('is-invalid');

    } else {
      /*remove the is-invalid class and message error if the input is not empty*/
      $(this).parent().find('.message').hide();
      $(this).parent().removeClass('is-invalid');
    }
  });
  $('input').bind('keypress', function (e) {
    $(this).parent().removeClass('is-invalid');
  });
  $('.modal-open').click(function (e) {
    e.preventDefault();
    $('.modal').addClass('fadeOutUp');
  });
});

Not sure where that inline styling was being triggered by

Community
  • 1
  • 1
Monomoni
  • 415
  • 1
  • 4
  • 15
  • Please post as much code as you can to assist us. There is not enough information regarding the code for sufficient analysis. – EGC Oct 10 '19 at 01:48
  • Have you tried hard refresh of the site in Incognito mode to clear the cache? – EGC Oct 10 '19 at 02:10
  • Also, if possible some CS might hold the answers – EGC Oct 10 '19 at 02:11
  • 1
    Okay I'm not sure why but when I removed the whole html script and pasted it in again before running another cache clear and refresh the issue has gone. Not sure if the phantom inline-styling is a common issue as this was the first time I've encountered it – Monomoni Oct 10 '19 at 02:22

1 Answers1

0

Because there is very limited information on this post, I encourage you to look into your code & see if any of the following apply.

These are related specifically to Chrome Incognito Mode & Hiding Content

  1. How to enable Google Chrome Incognito Mode detection blocking

Websites could tell if users were browsing in Incognito Mode because it blocked access to the "FileSystem" API. Now, Chrome 74 offers users the ability to spoof websites tracking this by creating a temporary virtual file system in a computer's memory, making it look like the browser is not in Incognito Mode

  1. Disabling Chrome cache for website development

Chrome has a persistent cache & can't see the updated site's appearance (CSS modifications)

  1. Ensure you aren't detecting private browsing & have custom CSS

localStorage.test = 2;

  1. Failed to load resource under Chrome

Start Chrome in incognito mode with extensions disabled (ctrl+shift+n) and see if your page works now.

Goodluck!

EGC
  • 1,516
  • 1
  • 4
  • 19
  • it would have nothing to do with the cache or chrome as I've done cache clearing as well and using it on firefox. – Monomoni Oct 10 '19 at 02:18