XF 2.2 Nav items randomly show scroll arrows (Safari & ios only?)

Mr Lucky

Well-known member
Every now and again I (and users) get an issue where one navigation item has a scroll arrow, as if the navigation is too wide for the page (it isn't). Scrolling a bit makes this go away.

Note in the example I do have an svg image in tha navigation, but this issue happens also with palin text.

Seems to only have been reported with ios devices and desktop Safari (15.1)

Does anyone know what might cause this?

View attachment Screen Recording 2021-11-17 at 14.28.00.mov
 
It may be because the image changes the dimensions of the horizontal scroll container after we've already taken measurements of it (to know whether or not to display the arrow). If you add dimensions to the image tag (width="39" height="28" should do the trick), does the issue persist?
 
If you add dimensions to the image tag (width="39" height="28" should do the trick), does the issue persist?
Many thanks.

I'm testing with that. Previously I only had the width (not the height), as a style <img src="https://cafesaxophone.com/styles/petecafe/new-mobile.svg" style="height:28px" />

I have now added the dimensions as you pointed out above.

I'll keep an eye on it - hard to say at the moment because as mentioned it is random and gows away once you refresh the page or just scroill up or down
 
Last edited:
@Jeremy P

Further testing:

I have replaced the SVG image with text, so is now just a normal nave button and this style happens. So I'm at a bit of a loss as it is so random.

If I refresh the page it repairs itself.
 
Hmm, I'm not really too sure then unfortunately. Debugging anything that isn't consistently reproducible is always going to be a bit of a pain.
 
@Jeremy P

I think you mave pinpointed the issue in the other thread.

I have this CSS to make the navigation dropdowns activate on hover

(as mentioned by @Russ in the thread here )

Code:
@media (min-width: (@xf-responsiveMedium + 1))

{
    .has-no-touchevents .p-nav, .has-no-touchevents .p-sectionLinks
    {
        .p-navEl[data-has-children]
            {
                position: relative;
                &:hover:not(.is-selected) .menu
                {
                    display: block;
                    opacity: 1;
                    top: @header-navHeight;
                    z-index: @zIndex-4;
                    
                }
                .p-navEl-splitTrigger { pointer-events: none; }
        }
        .hScroller { overflow: visible; }
        .hScroller-scroll
        {
            margin-bottom: 0 !important;
            overflow: visible;
            padding-bottom: 0 !important;
        }
    }
    .has-no-touchevents .p-sectionLinks .p-navEl[data-has-children]:hover:not(.is-selected) .menu { top: @header-subNavHeight; }
}

I'm testing now with that code removed. Funny I have had that CSS code for years and the issue only presented recently and only seems to be related to certain versions Mac OS and iOS and only manifest in April of this year.
 
Top Bottom