Sometimes Icons don't render on firefox on ubuntu #7980

MartinSchoeler · 2017-08-30T14:05:28Z

karlprieb · 2017-08-30T14:26:33Z

On which Firefox version do tested?

MartinSchoeler · 2017-08-30T14:38:43Z

Tested on a firefox 54.0 (64-bit) (firefox for ubuntu canonical - 1.0) on a ubuntu 16.04 LTS
Edit: on version 55.0.3 (64-bit) it works fine, the problem seems to be with the one that comes pre installed with ubuntu

Lemmmy · 2017-08-30T22:09:44Z

Having this issue on firefox 55, nixos and archlinux. Works fine on firefox 57.

cyclops24 · 2017-09-05T02:50:20Z

@RocketChat/core
Guys I see same issue on Firefox 55.
Why new UI design have many issue on Firefox? 🤔

mfueser · 2017-09-18T08:27:08Z

We have this issue with Firefox 54... Is there an option to use the old design?

Lemmmy · 2017-09-18T11:25:14Z

I don't think the new design is released in a stable version yet - just revert back to a stable version?

cyclops24 · 2017-10-08T04:25:20Z

@karlprieb It's still happens sometimes. 😢

cyclops24 · 2017-10-15T06:52:15Z

Part of #8494

avagulov · 2017-10-25T14:54:35Z

Face this issue using Firefox 52 esr on Windows. Rocket 0.59 release.

magicbelette · 2017-10-26T09:04:37Z

Rocket.Chat version 0.52.9
Firefox 52.3

Pretty anoying bug as Firefox 52 is an ESR.
Any lead on how to help on this ?

Cheers

magicbelette · 2017-11-03T11:57:40Z

No luck here...

I tried something simple with svg to be sure (based on RocketChat 0.59.3 simplified sources, see below). It works like a charm with FF 52 et Chrome. I also tried the full code of RocketChat 0.59.3 but without css and I still don't see icons.

Ideas ?

<!DOCTYPE html>
<html>
<head/>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="display: none">
<symbol id="icon-pin" viewBox="0 0 20 20">
<g stroke="currentColor" stroke-width="1.5" fill="none" fill-rule="evenodd"><path d="M13.497 14.719l3.119 3.12" stroke-linecap="square"></path><path d="M2.48 9.725a1.588 1.588 0 0 1-.004-2.239l4.627-4.627a1.583 1.583 0 0 1 2.24.004l-.37-.37a1.59 1.59 0 0 1-.003 2.243l-.124.124 3.743 3.744s2.496-1.247 4.992 1.248l-8.112 8.111c-2.495-2.495-1.248-4.991-1.248-4.991L4.478 9.228l-.125.125c-.62.62-1.624.621-2.244.002l.371.37z"></path></g>
</symbol>

<div class="tab-button" title="Pin">
        <button aria-label="Pin">
                <svg class="rc-icon tab-button-icon tab-button-icon--pin" aria-hidden="true">
                        <use xlink:href="#icon-pin"></use>
                </svg>
        </button>
</div>
</body>

Gummikavalier · 2017-11-05T13:34:43Z

I've been testing some things too but to no avail. To me it looks like all elements that are not visible on the screen are base64 encoded SVG icons.

All of those missing icons have changed after 0.58 I think, and maybe they have some image property that bugs in CSS with Firefox ESR.

EDIT: Except that icons are not encoded in base64 it seems. They are in one file under:

programs/server/assets/packages/rocketchat_ui-master/public/icons.svg

in the format like this:

<symbol viewBox="0 0 20 20" id="icon-star"><path d="M10 15l-4.898 2.575.935-5.454-3.962-3.863 5.476-.796L10 2.5l2.45 4.962 5.475.796-3.962 3.863.935 5.454z" stroke-width="1.5" stroke="currentColor" /></symbol>

The format seems to be SVG or pretty close to it.

Nevertheless, how this gets decoded in Firefox ESR might be the problem.

avagulov · 2017-11-09T15:20:41Z

It seems to work if we use absolute url for href in tag, for example
<use href="https://rebelraven.rocket.chat/channel/general#icon-bell"></use>
instead of
<use href="#icon-bell"></use>

Please, rocket.chat guys, fix it!

Lemmmy · 2017-11-09T16:28:20Z

@Agulov Could it be a HTTPS issue? Try href="/channel/general#icon-bell" and href="http://rebelraven.rocket.chat/channel/general#icon-bell" (http instead of https)

avagulov · 2017-11-10T06:20:01Z

@Lemmmy
href="/channel/general#icon-bell" works, i can see icon
href="http://rebelraven.rocket.chat/channel/general#icon-bell" does not work

exagon · 2017-11-15T10:46:26Z

Sorry, I can't understand how I can resolve this issue on my installation ( 0.59.3 ), someone can help me ?
thanks

kimgb · 2017-12-04T05:04:10Z

Minimally tested hack for anyone that needs a temporary fix. JQuery/JavaScript is not my strong point, improvements appreciated. This goes in Administration -> Layout -> Custom Scripts.

This makes use of the absolute URL workaround pointed out by @Agulov above. It appears to fix the icon problems in previous versions of Firefox without breaking Chromium or Firefox 59 - I haven't tested any other browsers. Use with caution and don't forget to take it out after a proper fix has been released.

// Hack to get SVG icons working on Firefox 52 ESR and other pre-59 versions
$(document).ready(function(){
  $("svg > use").map(function(){ 
    var svg_string = $(this)[0].href;

    if (svg_string.baseVal.startsWith("#")){
      svg_string.baseVal = window.location.href + svg_string.baseVal; 
      svg_string.animVal = window.location.href + svg_string.animVal;
    }
  });
})

EDIT/take 2:
Some icons weren't getting caught with the above due to the lack of full page reloads while using Rocket.Chat - particularly, the vertical ribbon of channel option icons. So did a bit more research, and came up with a more robust seeming fix using MutationObservers; most of this is well above my JavaScript level and thanks to this StackOverflow hero:

// Hack to get SVG icons showing on Firefox 52 ESR and other pre-59 versions
$(document).ready(function(){ 
  var observer = new MutationObserver(expandSVGPathsOnMutation);
  observer.observe(document, {
    childList: true, // report added/removed nodes
    subtree: true,   // observe any descendant elements
  });
  
  // automatically updated HTMLCollection
  var svg_uses = document.getElementsByTagName("use");
  
  function expandSVGPathsOnMutation(mutations){
    if (mutations.length == 1){
      var added = mutations[0].addedNodes[0];
      if (!added || (added.localName !== 'use' && !added.children.length)){
        return;
      }
    }

    for (var i = 0, len = svg_uses.length; i < len; i++){
      var svg_string = svg_uses[i].href;
      if (svg_string.baseVal.startsWith("#")){
        svg_string.baseVal = window.location.href + svg_string.baseVal;
        svg_string.animVal = window.location.href + svg_string.animVal;
      }
    }
  }
})

fnollet · 2017-12-05T07:59:52Z

Thanks for the fix! Works like a charm!

mhenninghaus77 · 2017-12-06T10:29:27Z

Yes, this Workaround works at my instance too, thanks a lot!

kimgb · 2017-12-06T23:56:58Z

This test if (!added || (added.localName !== 'use' && !added.children.length)) was giving me a ton of "undefined has no properties" JavaScript errors, and in this case I don't think the children length check is needed. You should be OK to replace it with if (!added || added.localName !== 'use') if the errors bother you or are causing actual trouble.

amateo · 2017-12-21T07:56:35Z

Neither of both patches supplied by @kimgb works for me. Tested with rocket.chat 0.59.4 and firefox ESR 0.52.2

MartinSchoeler added the subj: UI Redesign label Aug 30, 2017

MartinSchoeler added this to the 0.59.0-rc.3 milestone Aug 30, 2017

rodrigok modified the milestones: 0.59.0-rc.3, 0.59.0-rc.4 Aug 31, 2017

karlprieb self-assigned this Sep 1, 2017

gdelavald modified the milestones: 0.59.0-rc.5, 0.59.0-rc.4 Sep 4, 2017

gdelavald removed this from the 0.59.0-rc.5 milestone Sep 11, 2017

cyclops24 mentioned this issue Oct 10, 2017

[BUG] [UI] [i18n] Localization and isRTL contains some bugs #8439

Closed

This was referenced Oct 27, 2017

Firefox ESR does not display some UI items #8583

Closed

Missing sidebar icon and emoji icon #8683

Closed

Almost all Icon missing in firefox 52.4.1 (latest version of firefox that support windows XP) #8755

Closed

magicbelette mentioned this issue Dec 19, 2017

Right toolbar not displayed in firefox ESR #9179

Closed

karlprieb mentioned this issue Jan 2, 2018

[FIX] svg render on firefox #9311

Merged

rodrigok added this to the 0.60.3 milestone Jan 2, 2018

rodrigok closed this as completed in #9311 Jan 3, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sometimes Icons don't render on firefox on ubuntu #7980

Sometimes Icons don't render on firefox on ubuntu #7980

MartinSchoeler commented Aug 30, 2017

karlprieb commented Aug 30, 2017 •

edited

Loading

MartinSchoeler commented Aug 30, 2017 •

edited

Loading

Lemmmy commented Aug 30, 2017

cyclops24 commented Sep 5, 2017 •

edited

Loading

mfueser commented Sep 18, 2017

Lemmmy commented Sep 18, 2017

cyclops24 commented Oct 8, 2017

cyclops24 commented Oct 15, 2017

avagulov commented Oct 25, 2017 •

edited

Loading

magicbelette commented Oct 26, 2017

magicbelette commented Nov 3, 2017

Gummikavalier commented Nov 5, 2017 •

edited

Loading

avagulov commented Nov 9, 2017

Lemmmy commented Nov 9, 2017

avagulov commented Nov 10, 2017

exagon commented Nov 15, 2017

kimgb commented Dec 4, 2017 •

edited

Loading

fnollet commented Dec 5, 2017

mhenninghaus77 commented Dec 6, 2017

kimgb commented Dec 6, 2017

amateo commented Dec 21, 2017

Sometimes Icons don't render on firefox on ubuntu #7980

Sometimes Icons don't render on firefox on ubuntu #7980

Comments

MartinSchoeler commented Aug 30, 2017

karlprieb commented Aug 30, 2017 • edited Loading

MartinSchoeler commented Aug 30, 2017 • edited Loading

Lemmmy commented Aug 30, 2017

cyclops24 commented Sep 5, 2017 • edited Loading

mfueser commented Sep 18, 2017

Lemmmy commented Sep 18, 2017

cyclops24 commented Oct 8, 2017

cyclops24 commented Oct 15, 2017

avagulov commented Oct 25, 2017 • edited Loading

magicbelette commented Oct 26, 2017

magicbelette commented Nov 3, 2017

Gummikavalier commented Nov 5, 2017 • edited Loading

avagulov commented Nov 9, 2017

Lemmmy commented Nov 9, 2017

avagulov commented Nov 10, 2017

exagon commented Nov 15, 2017

kimgb commented Dec 4, 2017 • edited Loading

fnollet commented Dec 5, 2017

mhenninghaus77 commented Dec 6, 2017

kimgb commented Dec 6, 2017

amateo commented Dec 21, 2017

karlprieb commented Aug 30, 2017 •

edited

Loading

MartinSchoeler commented Aug 30, 2017 •

edited

Loading

cyclops24 commented Sep 5, 2017 •

edited

Loading

avagulov commented Oct 25, 2017 •

edited

Loading

Gummikavalier commented Nov 5, 2017 •

edited

Loading

kimgb commented Dec 4, 2017 •

edited

Loading