Ionic-framework: bug: menu icon rendered wrong in FF

[mpaland]

Type: bug

Ionic Version: 2.x

Platform: desktop browser

Tested with the ionic2-starter-sidemenu demo on FF 44 and latest ionic2-beta.
The list icon is rendered in the middle of the list instead of left.
Second: The middle line of the menu symbol icon is too thin. This is an issue of the .bar-button-menutoggle ion-icon { font-size: 2.8rem; } which seems to be too small. Is font-size necessary here?

Screenshot in FF 44:

Screenshot in Edge (correct):

[brandyscarney]

I'm not seeing any issues with the icon in FF 45. Are you still seeing this with the latest beta (2.0.0-beta.3)?

The list display is likely caused by this issue: https://bugzilla.mozilla.org/show_bug.cgi?id=984869
So we'll have to decide how to handle this.

[mpaland]

Brandy, thanks for taking care of this.
Unfortunately FF45 and beta.3 didn't change anything.
All looks exactly like the screenshot of FF44 above.

Version now is:

Cordova CLI: 6.0.0
Gulp version:  CLI version 3.9.1
Gulp local:
Ionic Version: 2.0.0-beta.3
Ionic CLI Version: 2.0.0-beta.19
Ionic App Lib Version: 2.0.0-beta.9
OS:
Node Version: v5.6.0

If you don't see it, what's the difference?

[brandyscarney]

I've tried reproducing the menu icon bug on Firefox 45 on Windows 7, Windows 10 and Mac OS X El Capitan. Are you by chance viewing it on a high-density display?

[mpaland]

First issue (misplaced list icons)
I had a look in the code of the ionic2-starter-sidemenu. As far as I can see, there's a bug in the code.
It should be <ion-icon ion-item ...

<ion-list>
    <ion-icon ion-item *ngFor="#item of items" (click)="itemTapped($event, item)">

and not <button ion-item ... in list.html
Changed this and the list icons work fine.

Second issue (blue menu icon):
I don't have any high res displays here, sorry. When I change the Windows display scaling, it has no effect in FF.
When I change the zoom level in FF to 110% icon get's better, but even when on 200% the 3 menu lines get a different thickness.

I can observe this issue in your docs http://ionicframework.com/docs/v2/components/#menus as well - for ios and Windows platform. Android is okay! All my FF (rendering settings) are absolute standard. Running FF 45 on Windows 10.

I tested on my notebook, running Windows 7 and having a standard display, too.
Testing with the docs, I can see the menu icon for ios and Android okay, but Windows platform has still the problem.

I assume it's some kind of aliasing effect when scaling/rendering the Ionicons font to a fractional size.

[jgw96]

Update: did a little more testing of this myself last night. On both osx el Capitan and Ubuntu 15.04 using both Firefox 45 and Firefox nightly I can't seem to repro the issue. Also tried on Firefox 45 on my Nexus 6 and couldn't repro it. My Mac has a retina display and the Ubuntu machine is just a standard 1080p display.

[mpaland]

This is how it is rendered on a Surface Pro 3 (High DPI display). Upper line is too thin.

[brandyscarney]

I'm going to remove this from a milestone because the bug has been reopened by firefox as something they need to resolve: https://bugzilla.mozilla.org/show_bug.cgi?id=984869#c24.

[btsiders]

For anyone needing to continue on while we wait for the Mozilla Firefox fix, this is my SCSS workaround specific to the button display:flex issue in my sidebar menu:

.platform-core {
    ion-list button.item {
        display: block; // override flex setting
        ion-icon[item-left] + .item-inner {
            padding-left: 24px; // spacing between icon and text
            margin-top: -43px; // negative item height
        }
    }
}

You may need to tweak the padding and margin numbers for your specific case. This is just a workaround. Using flex really is the better long-term solution.

[mpaland]

One known workaround for the button flex "problem" in FF is to have a child div with display:flex.
But I haven't tried this for menu rendering yet.

<button>
  <div style="display: flex">
    <ion-icon> ... </ion-icon>
    Item Text
  </div>
</button>

[jgw96]

Just tested this in the latest firefox and cannot seem to reproduce anymore. Thanks for using Ionic everyone!

[mpaland]

FYI: I can still reproduce this button flex issue with FF 49.0.2 on Windows 10 with the ionic-conference-app menu.

[webprofusion-chrisc]

@jgw96 I can confirm this bug is still happening on FF50.0 - Windows 10 - perhaps it's Windows only which is why you're not seeing it?

[jgw96]

Hello all, I cannot reproduce this issue with firefox 52. Because of this I am going to close this issue for now. If its still happening for you guys please feel free to comment and we will reopen this issue.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.