m.uk.ign.com - Review scores are not displayed

[webcompat-bot]

URL: https://m.uk.ign.com/articles/2019/01/22/resident-evil-2-review

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

Problem type: Something else
Description: review scores don't display
Steps to Reproduce:
Any review on IGN doesn't display a score at the bottom, works on desktop version of Firefox and also works on Chrome (mobile and desktop)

Browser Configuration

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

Console Messages:

[u'[JavaScript Error: "Error: only one instance of babel-polyfill is allowed" {file: "https://apps.ign.com/video-player/release/6.4.4/default.1818a8e8.js" line: 1}]\nVideoPlayer with source https://tpc.googlesyndication.com/pagead/js/r20190116/r20110914/client/ext/m_window_focus_non_hydra.js." {file: "https://m.uk.ign.com/articles/2019/01/22/resident-evil-2-review" line: 1}]', u'[JavaScript Warning: "Use of the orientation sensor is deprecated." {file: "https://z.moatads.com/ignimajsint947428450867/moatvideo.js#_moatApi82537954" line: 107}]', u'[JavaScript Warning: "Loading failed for the <script> with source https://tpc.googlesyndication.com/pagead/js/r20190116/r20110914/client/ext/m_window_focus_non_hydra.js." {file: "https://m.uk.ign.com/articles/2019/01/22/resident-evil-2-review" line: 1}]', u'[JavaScript Warning: "Loading failed for the <script> with source https://tpc.googlesyndication.com/pagead/js/r20190116/r20110914/client/ext/m_window_focus_non_hydra.js." {file: "https://m.uk.ign.com/articles/2019/01/22/resident-evil-2-review" line: 1}]', u'[console.time(a) https://static.adsafeprotected.com/sca.17.4.95.js:32:7983]', u'[console.timeEnd(a) https://static.adsafeprotected.com/sca.17.4.95.js:32:8001]', u'[JavaScript Warning: "onmozfullscreenerror is deprecated." {file: "https://static.adsafeprotected.com/sca.17.4.95.js" line: 33}]', u'[JavaScript Warning: "WebRTC interfaces with the "moz" prefix (mozRTCPeerConnection, mozRTCSessionDescription, mozRTCIceCandidate) have been deprecated." {file: "https://static.adsafeprotected.com/sca.17.4.95.js" line: 33}]', u'[JavaScript Error: "TypeError: b._settings is undefined" {file: "https://oystatic.ignimgs.com/cache/js/57/48/57484c6e4d23147691017cf8cec838b7.js" line: 10}]\ne@https://oystatic.ignimgs.com/cache/js/57/48/57484c6e4d23147691017cf8cec838b7.js:10:438\ninit@https://oystatic.ignimgs.com/cache/js/57/48/57484c6e4d23147691017cf8cec838b7.js:8:312\n', u'[console.log(ZD Core :: Outbound Link Tracking Initialized) https://bbstatic.ign.com/js/zd-core-olt.min.js?v=5:1:780]']

From webcompat.com with ❤️

[Taegeonlee]

[Taegeonlee]

I can reproduce the issue.

[softvision-sergiulogigan]

Thanks for the report!
I'm able to reproduce the issue.

Tested with:
Browser / Version: Firefox Nightly 67.0a1 (2019-01-30)
Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

Also, thanks @Taegeonlee for checking this one.
Moving to Needsdiagnosis.

[karlcow]

The number is here definitely.

.hexagon-in2 {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 58%;
	background-size: auto 140%;
	background-color: #000;
	visibility: visible;
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

if we set visibility: visible; to hidden, we get

So there is something on top of the number which is missing its background-image? Let's try to find out.

<div class="score-container mobile-app">
  <div class="hexagon hexagon-outer">
    <div class="hexagon-in1">
      <div class="hexagon-in2"></div>
    </div>
  </div>
  <div class="hexagon hexagon-inner">
    <div class="hexagon-in1">
      <div
        class="hexagon-in2"
        style="background-image: url(https://assets1.ignimgs.com/2019/01/22/residentevil2-header-1548123742480.jpg);"
      ></div>
    </div>
  </div>
  <span class="rating">
    <span class="worst"><span class="value-title" title="0"></span></span>
    <span class="score value"> 9.0 </span>
    <span class="best"><span class="value-title" title="10"></span></span>
  </span>
</div>

The image, the number, everything is there. just not displayed in the same order like if there was an issue with the order of the layers. z-index?

[karlcow]

When I do

.hexagon-in2 {
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: 58%;
	background-size: auto 140%;
	/* background-color: #000; */
	visibility: visible;
	-webkit-transform: rotate(-60deg);
	-moz-transform: rotate(-60deg);
	-o-transform: rotate(-60deg);
	transform: rotate(-60deg);
}

I see the full thing but not the black border.

ooof

.hexagon.hexagon-outer {
	margin: -5px 0 0 18px;
	/* z-index: 21; */
	width: 100px;
	height: 115px;
}

This is working. And if I remove it, it doesn't change anything in Chrome.

So there's a difference in between Chrome and Firefox, but there's a an easy fix.