www.dragonshield.com - design is broken

[webcompat-bot]

URL: http://www.dragonshield.com/standard-sleeves

Browser / Version: Firefox 66.0 Operating System: Linux Tested Another Browser: Yes

Problem type: Design is broken Description: Images do not appear on this page Steps to Reproduce: I loaded the page, and images do not load on this page.

They work on Chromium.

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20181229093614
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: false
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: true
• channel: nightly

Console Messages:

[u'[JavaScript Error: "ReferenceError: jQuery is not defined" {file: "http://www.dragonshield.com/standard-sleeves" line: 36}]\n@http://www.dragonshield.com/standard-sleeves:36:1\nC

From webcompat.com with ❤️

[cipriansv]

Thanks for the report, I was indeed able to reproduce the issue.

Tested with: Browser / Version: Firefox Nightly 66.0a1 (2018-01-02), Chrome 71.0.3578.98 Operating System: Windows 10 Pro

This is the web page displayed in Firefox Nightly:

And this is the web page displayed in Chrome:

[karlcow]

a black square with the title appears on hover.

<article id="11398" class="mk-portfolio-item mk-portfolio-grid-item four-column fadebox-hover art-sleeves">
  <div class="item-holder">
    <div class="featured-image js-taphover" onclick="">
      <img 
        class="portfolio-image" 
        alt="‘Valentine Dragons’Art SleevesClassic 100 standard" 
        title="‘Valentine Dragons’Art SleevesClassic 100 standard" 
        src="http://cdn3.dragonshield.com/wp-content/uploads/dummy.png" 
        data-mk-image-src-set="{&quot;default&quot;:&quot;http://cdn4.dragonshield.com/wp-content/uploads/2018/11/g/DS100-Art-Valentine_Dragons-composite-300x300.png&quot;,&quot;mobile&quot;:&quot;&quot;,&quot;responsive&quot;:&quot;false&quot;}" 
        width="300" height="300">
      <div class="hover-overlay add-gradient"></div>
      <div class="portfolio-meta">
        <div class="add-middle-align">
          <h3 class="the-title"><a target="_self" href="http://www.dragonshield.com/product/valentine-dragons-art-sleeves-classic-100-standard">‘Valentine Dragons’<br>Art Sleeves<br>Classic 100 standard</a></h3>
          <div class="clearboth"></div>
        </div>
      </div>
    </div>
  </div>
</article>

so I imagine that the value of data-mk-image-src-set is not properly interpreted. It contains http://cdn4.dragonshield.com/wp-content/uploads/2018/11/g/DS100-Art-Valentine_Dragons-composite-300x300.png

which is the image to display for the first thumbnail.

That doesn't look good for a starter.

11:26:51.110 ReferenceError: jQuery is not defined[Learn More] standard-sleeves:36:1
    <anonymous> http://www.dragonshield.com/standard-sleeves:36
    activateScript https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js:1
    n https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js:1
    run https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js:1
    n https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js:1
    c https://ajax.cloudflare.com/cdn-cgi/scripts/2448a7bd/cloudflare-static/rocket-loader.min.js:1

and

11:26:51.574 TypeError: wpcf7.initForm is not a function[Learn More] scripts.js:2:439
    <anonymous> http://cdn2.dragonshield.com/wp-content/plugins/contact-form-7/includes/js/scripts.js:2
each2jQuery <anonymous> http://cdn2.dragonshield.com/wp-content/plugins/contact-form-7/includes/js/scripts.js:2
i5jQuery    <anonymous> http://cdn2.dragonshield.com/wp-content/plugins/contact-form-7/includes/js/scripts.js:2
    <anonymous> http://cdn2.dragonshield.com/wp-content/plugins/contact-form-7/includes/js/scripts.js:1

but we have the same errors in Chrome Canary… ah but in Chrome Canary the images are not displayed either.

certificate issue? What is the network tab saying? hmm nothing about certificate.

let's do a reload in Chrome. This time we get the images with the src properly setup.

<img class="portfolio-image" alt="‘Valentine Dragons’Art SleevesClassic 100 standard" title="‘Valentine Dragons’Art SleevesClassic 100 standard" 

src="http://cdn4.dragonshield.com/wp-content/uploads/2018/11/g/DS100-Art-Valentine_Dragons-composite-300x300.png" 

data-mk-image-src-set="{&quot;default&quot;:&quot;http://cdn4.dragonshield.com/wp-content/uploads/2018/11/g/DS100-Art-Valentine_Dragons-composite-300x300.png&quot;,&quot;mobile&quot;:&quot;&quot;,&quot;responsive&quot;:&quot;false&quot;}" width="300" height="300" mk-img-src-setted="">

So there is probably a timing issue (race condition which happened once in Chrome, but always happens in Firefox.)

and it has the attribute mk-img-src-setted=""

So this is happening here. http://cdn2.dragonshield.com/wp-content/themes/jupiter/assets/js/min/full-scripts.js

  v.component.ResponsiveImageSetter = function (e) {
    'use strict';
    var t = {
    },
    i = s(),
    n = window.devicePixelRatio >= 2;
    function a(e) {
      e.filter(function () {
        return !this.hasAttribute('mk-img-src-setted')
      }).each(o)
    }
    function o() {
      var t = e(this),
      a = t.data('mk-image-src-set');
      'false' === a.responsive && n && a['2x'] ? t.attr('src', a['2x'])  : 'false' === a.responsive ? t.attr('src', a.default) : 1 === i && n && a['2x'] ? t.attr('src', a['2x'])  : 0 === i && a.mobile ? t.attr('src', a.mobile)  : t.attr('src', a.default)
    }
    function s() {
      return window.matchMedia('(max-width: 736px)').matches ? 0 : 1
    }
    return t.init = function (e) {
      e.length && (a(e), e.attr('mk-img-src-setted', ''))
    }, t.onResize = function (t) {
      e(window).on('resize', v.utils.throttle(500, function () {
        !function (e) {
          if (e.length) {
            var t = s();
            t > i && (i = t, a(e))
          }
        }(t)
      }))
    }, t.handleAjax = function () {
      setTimeout(function () {
        var t = e('img[data-mk-image-src-set]').filter(function () {
          return !this.hasAttribute('mk-lazyload')
        });
        t.length && a(t)
      }, 100)
    }, t
  }(jQuery),

but I wonder if the script is loaded at all. So maybe the Reference Error about jQuery has something to do with it.

[karlcow]

It's resizing correctly the image at the top, but not the images of the gallery. :) So something is happening. but I haven't quite found yet what is happening. I thought it could be a timeout. but it doesn't seem to be it.

[karlcow]

oh wait for the same exact size window, I get the same behavior in Firefox and Chrome now on clean profile at first load.

scripts.js?ver=1547822840:2 Uncaught TypeError: wpcf7.initForm is not a function
    at HTMLFormElement.<anonymous> (scripts.js?ver=1547822840:2)
    at Function.each (jquery.js?ver=1547822840:1)
    at n.fn.init.each (jquery.js?ver=1547822840:1)
    at HTMLDocument.<anonymous> (scripts.js?ver=1547822840:2)
    at i (jquery.js?ver=1547822840:1)
    at Object.add [as done] (jquery.js?ver=1547822840:1)
    at n.fn.init.n.fn.ready (jquery.js?ver=1547822840:1)
    at new n.fn.init (jquery.js?ver=1547822840:1)
    at n (jquery.js?ver=1547822840:1)
    at scripts.js?ver=1547822840:2

[karlcow]

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.