Menu icon Foundation
Dropdown & Orbit Arrows in Firefox

Sorry if this has already been answered, I searched but didn't see anything.
I noticed that the triangular arrow icon on split buttons, dropdowns, and the orbit prev and next buttons is rotated so that it isn't pointing in the correct direction. In some instances there is a second smaller arrow triangle sort of off to the side of the larger skewed triangle. This occurs in Firefox 30 (Windows 7) but not in Chrome (I haven't checked any other browser). It's nothing I'm doing as this occurs on the foundation website when viewed in Firefox (kitchen sink). On the dropdowns, there's something going on where the menu meets the button (some sort of mini icon becomes visible when the menu appears). Does anyone have any ideas about what's going on and a possible fix? Any help would be appreciated.

Split button problem

Orbit slider

arrowsdropdownsplit buttonfirefox

Sorry if this has already been answered, I searched but didn't see anything.
I noticed that the triangular arrow icon on split buttons, dropdowns, and the orbit prev and next buttons is rotated so that it isn't pointing in the correct direction. In some instances there is a second smaller arrow triangle sort of off to the side of the larger skewed triangle. This occurs in Firefox 30 (Windows 7) but not in Chrome (I haven't checked any other browser). It's nothing I'm doing as this occurs on the foundation website when viewed in Firefox (kitchen sink). On the dropdowns, there's something going on where the menu meets the button (some sort of mini icon becomes visible when the menu appears). Does anyone have any ideas about what's going on and a possible fix? Any help would be appreciated.

Split button problem

Orbit slider

This post has been closed. No new replies can be added.

Wing-Hou Chan over 5 years ago

Hey Andrew!

Yes, this problem pops up every now and then. Take a look at this thread and see if any of the solutions there help fix it:

http://foundation.zurb.com/forum/posts/799-orbit-arrow-display-issue

This problem is a funny problem because not every FireFox user experiences this problem. I use FireFox and I don't see any problem with the arrows but a select few do.

Andrew Hawes over 5 years ago

fixed it according to this post: http://foundation.zurb.com/forum/posts/799-orbit-arrow-display-issue

  1. open developer tools in your browser
  2. Inspect the elements that are displayed incorrectly.
  3. select their span tags in developer tools
  4. look for the word "inset" on the css side, highlight & copy the class name that contains it.
  5. open app.scss in your editor
  6. recreate the class in app.scss with the correct "solid" instruction (you only need the one style defined).
  7. refresh [F5] the page to see if it worked.