Font awesome not showing just one icon in firefox, but in chrome is working perfectly

Question

I have this webpage, it works smoothly with chrome, but with firefox, the right arrow is not showing, I am using font-awesome, and tried this answer in this post Font awesome not working in Firefox with no success.

I am using CDN to call font awesome, so the fonts are in their server, the strange thing is that is only in firefox the problem.

I am using Ubuntu Linux 16.04, and firefox 52.0.1 (64-bits)

Please could someone tell me how to deal with firefox and this strange issue?

UPDATE: the issue happens with firefox in Linux and Windows

I use linux, I haven't tried on Windows or mac, but in Linux with firefox the right arrow is not showing up — ricardorios, Mar 23 '17 at 15:31
Then somebody else might be able to help you as I don't have linux installed here on my system. — Simrandeep Singh, Mar 23 '17 at 15:32
Please add a [mcve] using something like jsbin, or an in-post html+css+js snippet, so we can see what you're trying to achieve, because the answer you posted for yourself is *definitely* not the right answer (`%` and `vw` are completely different types of units and you can't substitute one for the other) — Mike 'Pomax' Kamermans, Mar 24 '17 at 17:30

score 0 · Accepted Answer · answered Mar 23 '17 at 18:50

0

Ok, it seems that the CSS for firefox is pretty different to the other web browsers, I had to do this:

Cange this:

.next-prev-cities-titles {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none
}

For This:

.next-prev-cities-titles {
    position: absolute;
    width: 100vw;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none
}

Firefox wasn't taking the 100% width

answered Mar 23 '17 at 18:50

ricardorios

356
1
7
26

You could have just done `right: 0;` also, which is more "correct" with the absolute positioning. And just dropped the width (and height, but that would have meant a `bottom: 0;` as well) – junkfoodjunkie Mar 23 '17 at 20:35
`100vw` is not the same as `100%` at all. 100vw are absolute dimensions based on the viewport's width. No matter how small the element's parent is, 100vw is always the same length, and so anything with 100vw that is inside another element will pretty much guaranteed overflow. On the other hand, 100% is "100% of the parent element" (or, really: of the closest ancestor with a `position` set, ending at ``). So you've made a change that does something *completely different*, and just happens to *look* like it's what you need. But it's not a fix, it's a new bug =) – Mike 'Pomax' Kamermans Mar 24 '17 at 17:28
@Mike'Pomax'Kamermans so you can help with the correct solution instead of marking the negative post – ricardorios Mar 24 '17 at 21:05
probably, if there's a [mcve] to work with. Without that, we'd have to guess at the HTML and CSS that's actually involved (we're not going to sift through an entire website, [it's on you](/help/how-to-ask) to reduce your problem case to something you can post as part of your question). That said, I downvoted because this solution makes it seem like `100%` and `100vw` are mutually interchangeable which is almost *never* the case, so even if this works for you, right now, it's a terrible answer for others who might run into this question later (remember: SO posts are not just for you) – Mike 'Pomax' Kamermans Mar 24 '17 at 23:23

Font awesome not showing just one icon in firefox, but in chrome is working perfectly

1 Answers1