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

[Mr Lucky]

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

 

[Jeremy P]

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?

 

[Mr Lucky]

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

 

[Mr Lucky]

Just happened again

 

[Mr Lucky]

@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.

 

[Jeremy P]

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.

 

[Mr Lucky]

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.

Yes,I have accepted it may be tricky to diagnose!

I wonder if it could be the margins between the buttons?

 

[Mr Lucky]

@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 )

@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.

 

[Mr Lucky]

Better late than never, finally got around to solving this. It was indeed that piece of code which which makes the dropdown on hover.

I removed this and all is good on all devices finally

@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; }
}