m.pikicast.com - site is not usable

[webcompat-bot]

URL: https://m.pikicast.com/contents-slide/?contentsId=550667

Browser / Version: Firefox Mobile 59.0
Operating System: Android 8.1.0
Tested Another Browser: Yes

Problem type: Site is not usable
Description: content no show(cartoon)
Steps to Reproduce:
load page
swipe page

ad show
content no show

From webcompat.com with ❤️

[karlcow]

I get an ad.

second swipe I have yet another screen, but my korean is sub-par. ;)

@channy Could you help us figure out what is written in this last screen?

[softvision-oana-arbuzov]

I was able to reproduce the issue, it appears that when swiping the page, on Firefox the cartoon is not displayed (black pages are displayed).

Affected area:

<div class="card swiper-slide" data-card-id="27797897" style="width: 388px;">
	<div class="card-body">
			<div class="img" style="max-height: 732px; background: rgb(0, 0, 0) none repeat scroll 0% 0%;">
				<img id="app-contents-card-photo-image" class="img-responsive" src="https://cdnb.pikicast.com/500/2017/12/05/500_27797897_1512439193.jpeg" onerror="this.src='/images/3.0/thumbnail_dummy.png';" alt="">
			</div>
			<div class="text-area">
				<p class="text"><span></span></p>
                <!--
                <a href="javascript:void(0);" class="text_more" id="app-contents-card-text-more">더보기</a>
                <a href="javascript:void(0);" class="text_origin" id="app-contents-card-text-origin">접기</a>
				-->

        <div class="card_order"><a href="javascript:;" class="page_prev">이전</a><div class="combine_btn_wrap"><span class="combine_view_btn" data-cardindex="1">모아보기</span><span class="paging">1/55</span></div><a href="javascript:;" class="page_next">다음</a></div>
                <div class="app-contents-card-btn-comments"><a href="javascript:;">18</a></div>
                <div class="card_like"><a id="app-contents-card-btn-like">좋아요</a></div>
                <div class="app-contents-card-btn-share"><a href="javascript:;">공유하기</a></div>
		    </div>
		    <div class="text_modal app-contents-card-text-origin"></div>
	</div>
	<div class="img_layer_wrap" style="display: none;"><div class="img_layer"></div></div>
</div>

Tested with:
Browser / Version: Firefox Nightly 59.0a1 (2017-12-21)
Operating System: Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density), Google Pixel (Android 8.0.0) - 1080 x 1920 pixels (~441 ppi pixel density)

[karlcow]

This is working for me.

[softvision-oana-arbuzov]

The issue is still reproducible for me, after swiping the ads I get black pages.

Tested with:
Browser / Version: Firefox Nightly 63.0a1 (2018-08-15)
Operating System: Google Pixel (Android 9) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S7 Edge (Android 8.0.0) - Resolution 1440 x 2560 pixels (~534 ppi pixel density)

Reopening the issues to investigate further.

[karlcow]

ah understood. the second transition should lead to a cartoon.

Changing the UA string doesn't fix it.
The transition to the manga in Chrome is happening on
https://m.pikicast.com/js/app-contents-slide.js?v=1526451083590

                    (s = g.handle) || (s = g.handle = function(t) {
                        return "undefined" != typeof ce && ce.event.triggered !== t.type ? ce.event.dispatch.apply(e, arguments) : void 0
                    }

But the interesting part is that in Firefox none of the images of the manga are downloaded.
This is happening at first load and for obvious reasons this is not working, at least for the images being displayed.

https://cdnb.pikicast.com/550/2017/12/05/550_27797897_1512439194.webp

in https://m.pikicast.com/js/app-contents-slide.js?v=1526451083590

render: function () {
var e = _.clone(this._model);
return e.locked = this._locked,
e.photoUrl = e[o && e.webPUrl ? 'webPUrl' : 'url'],
e.postingClassName = _.bind(function () {
if (e.postingMeta.expiryFlag) return 'closed';
switch (e.postingMeta.postType) {
case 'IMAGE':
return 'img';
case 'VIDEO':
return 'avi';
case 'TEXT':
return 'txt'
}
},

This probably starts before this. because this is never triggered for example in Firefox.
https://m.pikicast.com/v3/editors/18854253/?contentsId=550667

[karlcow]

to be continued…

[miketaylr]

e.photoUrl = e[o && e.webPUrl ? 'webPUrl' : 'url'],

Is this trying to use webp?

[karlcow]

yes it does. but what I'm not sure about is that why the pages are missing.
Firefox knows how to download a WebP, it doesn't know how to display them.

and as I said

This probably starts before this. because this is never triggered for example in Firefox.

[karlcow]

ok my bad this is triggered!!! I had set the breakpoint at the wrong place.

It goes through and gets URLs such as
https://cdnb.pikicast.com/500/2017/12/05/500_27797912_1512439205.jpeg

We get this error message in the console too.

TypeError: t is undefined; can't access its "contentDocument" property[Learn More]
app-brandcard.js:1:557
16:25:40.289
TypeError: t is undefined; can't access its "contentDocument" property[Learn More] app-brandcard.js:1:557

with a crazy number of errors which makes the CPU goes high. triggered by

    $(function () {
      var t = e.extend({
        el: $('#brandTx'),
        initialize: function () {
          this._timeout = null,
          this.render()
        },
        render: function () {
          this._timeout = window.setInterval(_.bind(function () {
            var t = $('#brandTx').find('iframe');
            t.css('width', '100%'),
            t.css('height', '100%');
            var t = t.get(0),
            e = t.contentDocument ? t.contentDocument : t.contentWindow.document,
            n = e.getElementById('banner');
            if (n) {
              var r = (e.getElementsByTagName('body'), $('body').width()),
              i = e.getElementById('toast');
              i && ($(i).css('width', '100%'), $(i).css({
                'margin-left': - r / 2 + 'px'
              }), $(n).css({
                'margin-left': - r / 2 + 'px'
              }), $(n).css('width', '100%'));
              var o = n.getElementsByTagName('img');
              $(o).css('width', '100%'),
              $(o).css('height', '100%')
            }
          }, this), 50)
        }
      });
      new t
    })

exactly this line:

 e = t.contentDocument ? t.contentDocument : t.contentWindow.document,

<iframe src="/brandcard/" id="ad-tx" class="app-contents-brandcard_cont_ban_img" marginwidth="0" marginheight="0" scrolling="NO" style="height: 414px; margin-left: -138px; margin-top: -207px;" frameborder="0"></iframe>

includes indeed a <body id="brandTx" class="brand_tx" style="height:100%">

var t = $('#brandTx').find('iframe');

There is no iframe inside.

There's JS inside trying to create iframe without success.

or maybe it's a new error created because of us removing window.event temporarily.

[karlcow]

The contact is cs@pikicast.com

The content on desktop
https://www.pikicast.com/#!/menu=landing&content_id=510927

[karlcow]

        getContentsCardItems: function() {
          var e = this.getContentsCover(),
            t = r.toggleProtocol(this.getCDNUrl()),
            n = _.clone(this._contents.cardList);
          switch (this.getContentsType()) {
            case u.CURATION:
              n = _.filter(
                n,
                _.bind(function(e) {
                  return _.contains(
                    [c.PHOTO, c.VIDEO, c.LANDING, c.YOUTUBE],
                    e.cardType
                  );
                }, this)
              );
          }
          return _.each(
            n,
            _.bind(function(i, a) {
              (i.contentsId = this.getContentsId()),
                (i.contentsType = this.getContentsType()),
                (i.contentsTypes = this.getContentsTypes()),
                (i.editorPhotoUrl = e.editorPhotoUrl),
                (i.editorName = e.editorName),
                (i.isOfficial = e.isOfficial),
                (i.udate = e.udate),
                (i.fromApp = this.getFromApp()),
                (i.url = r.addHost(t, i.url)),
                (i.videoThumbnailImageUrl = r.addHost(
                  t,
                  i.videoThumbnailImageUrl
                )),
                (i.liveStreamingUrl = r.addHost(t, i.liveStreamingUrl)),
                (i.webPUrl = r.addHost(t, i.webPUrl)),
                (i.sourceUrl = i.sourceUrl
                  ? r.getSourceUrl(i.sourceUrl)
                  : "javascript:void(0);"),
                (i.appViewUrl = r.getAppViewUrl(this.getContentsId())),
                (i.userDefaultPhotoUrl = this.getUserDefaultPhotoUrl()),
                (i.emptyDefaultPhotoUrl = this.getEmptyDefaultPhotoUrl()),
                (i.shareUrl = r.getShareUrl(this.getContentsId())),
                _.each(i.itemList, function(e, n) {
                  e.imageUrl = r.addHost(t, e.imageUrl);
                }),
                (i.cardsLength = n.length),
                (i.pageNo = a + 1),
                (i.isBGM = e.isBGM),
                (i.editorMark = e.editorMark),
                (i.indexnum = 0),
                (i.inflowSource = this.getInflowSource()),
                (i.osType = this.getOsType());
            }, this)
          );
        },

(to note that in Chrome there are crazy number of error messages and it has a tendency to crash devtools.)

The way things are being processed. it initiazes an array which contains the URL in webPUrl when the page is initially loaded.

So everything is already set up at the start.

it will fetch for each image of the Array.

                i.webPUrl = r.addHost(t, i.webPUrl),

so if they were providing the URL for jpeg images or if Firefox supports webP we are all set.

[karlcow]

Close as duplicate of #1294490 (Mozilla)