search

webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
750 stars 68 forks source link

www.wattpad.com - Lock icon is not displayed #23003

Open cipriansv opened 5 years ago

cipriansv commented 5 years ago

URL: https://www.wattpad.com/library

Browser / Version: Firefox Nightly Mobile 66.0a1 (2018-12-17) Operating System: Samsung Galaxy S6 (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density) Tested Another Browser: Yes

Problem type: Design is broken Description: Lock icon is not displayed

Prerequisites:

Steps to reproduce:

  1. Navigate to https://www.wattpad.com/library
  2. Reach the "Private" section from the right side of the screen.
  3. Observe the lock icon.

Expected Behavior: The lock icon must be correctly displayed.

Actual Behavior: The lock icon is replaced by a transparent image icon.

Notes:

  1. The issue is not reproducible on Chrome Mobile 71.0.3578.98
  2. Screenshot attached.

Affected area:

<img class="fa fa-lock fallback " style="height:14px; width:auto;" src="/img/icons/fa-mediumgrey/lock.png">

Watchers: @softvision-oana-arbuzov @softvision-sergiulogigan @cipriansv

sv; country: id Screenshot Description

Browser Configuration
  • None

From webcompat.com with ❤️

karlcow commented 5 years ago

This is calling

on Mobile

and 

.fa {
    font-family: wp-web-icons;
    speak: none;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ON desktop this is done with 

<div class="pull-right page-status">
    <span class="fa fa-lock fa-fa-mediumgrey " aria-hidden="true" style="font-size:14px;"></span> <span>Private</span>
</div>

but on mobile it is calling an image which is non-existent in addition to the font. /img/icons/fa-mediumgrey/lock.png Firefox shows the broken icon for images.

karlcow commented 5 years ago

and this seems to be done by https://a.wattpad.com/js/mobile-web/handlebars-helpers.js in utils.iconify

karlcow commented 5 years ago

@Wattpad is on github. Maybe @osama or @soundslikework may help us to find the right person.

softvision-sergiulogigan commented 4 years ago

This is still reproducible.

Tested with: Browser / Version: Firefox Preview Nightly 200112 (🦎 74.0a1-20200110095023) Operating System: Samsung Galaxy S8 (Android 9) - 1440 x 2960 pixels, 18.5:9 ratio (~570 ppi density)