Browser issue Breadcrumb not showing properly in FireFox

EgyKit

Member
I've noticed that breadcrumb is not showing properly as it was before in firefox "using latest 19.0.2"

See attached images:

faultybreadcrumb.webp

I didn't review the new code that may has been changed in templates, but I think this maybe a CSS changes!

I took a screenshot from my forum "left to right view" using Xenforo 1.1.3:

correctbreadcrumb.webp
 
Does anyone else see this, particularly if you had problems with the breadcrumb pre-1.1.4? I can't reproduce it.
 
Does anyone else see this, particularly if you had problems with the breadcrumb pre-1.1.4? I can't reproduce it.

No, I didn't have any problem showing the breadcrumb pre-1.1.4 version, I've noticed this issue while ago here in xenforo.
 
I took a screenshot from my forum "left to right view" using Xenforo 1.1.3:

correctbreadcrumb-png.42878
 
Ah, I run into this bug some time ago, when I implemented "Breadcrumb and arrow quick fix for FF" into extra.css in XF 1.1.3.

The fix was great, then after I upgrade FF from 18 to 19, the breadcrumb and arrow changed (Broken like #1 post)

Then I upgrade 1.1.3 to 1.1.4, and remove the quick fix. So far no problem.

Win 7 SP 1 32-bit
 
I have the same problem using FF 19.0.2 /Win7 32, but only with 1.1.4 version here and in my localhost test. No problems with 1.1.3 before upgrade.
Breadcrumb_ff.webp
 
Ah, I run into this bug some time ago, when I implemented "Breadcrumb and arrow quick fix for FF" into extra.css in XF 1.1.3.

The fix was great, then after I upgrade FF from 18 to 19, the breadcrumb and arrow changed (Broken like #1 post)

Then I upgrade 1.1.3 to 1.1.4, and remove the quick fix. So far no problem.

Win 7 SP 1 32-bit
Okay, strange. I see the broken arrow in here and in my site too. Using inspect element, it looks like the "real culprit is

Code:
.breadcrumb .crust .arrow span {
-moz-border-right-colors: rgb(240, 247, 252);
}

FF 19.0.2 Win 7 SP 1 32-bit
 
Okay, strange. I see the broken arrow in here and in my site too. Using inspect element, it looks like the "real culprit is

Code:
.breadcrumb .crust .arrow span {
-moz-border-right-colors: rgb(240, 247, 252);
}

FF 19.0.2 Win 7 SP 1 32-bit

So I could edit the css style property in the meantime "-moz-border-right-colors: none;" to fix this issue?
 
Before:
kAoQ64H.jpg


After -moz-border-right-colors: none;
sElwg9W.jpg


Yeah, maybe. :unsure:

Anyway I'm using 1.1.4 (Upgraded from 1.1.3)

No, I've fixed this :)

You should edit both outer and inner breadcrumb style property:

remove this component in both Item Arrow, OuterItem Arrow, Inner

-moz-border-right-colors: @breadcrumbItemCrumb.border-bottom-color; or edit "@breadcrumbItemCrumb.border-bottom-color' to "none"

This should fix the issue.
 
Top Bottom