Menu icon Foundation
Screen artifact in drilldown menu

I 'm finding that a vertical line artifact appears in the operation of a vertical drilldown menu that I used on a webpage, but only in Mac browsers. The line showed up after the default "white" background in the menu was changed to a different $primary-color in _settings.scss, and always displays after clicking the "back" button on the lowest level. It then disappears when the top menu level appears.

A jpg is attached that shows the menu levels going from left to right, with the artifact appearing on the middle panel of this 3-level menu. Any thoughts on how this can be fixed?

Menu artifact

drilldown menu

I 'm finding that a vertical line artifact appears in the operation of a vertical drilldown menu that I used on a webpage, but only in Mac browsers. The line showed up after the default "white" background in the menu was changed to a different $primary-color in _settings.scss, and always displays after clicking the "back" button on the lowest level. It then disappears when the top menu level appears.

A jpg is attached that shows the menu levels going from left to right, with the artifact appearing on the middle panel of this 3-level menu. Any thoughts on how this can be fixed?

Menu artifact
Rafi Benkual almost 4 years ago

That's interesting! What do you see in the Chrome inspector that's causing it? If you share your markup we can test it out and help you narrow it down.

Brian Danchuk almost 4 years ago

Hi Rafi

I decided to move on and use a third-party slide-in off canvas menu, modifying the css to create an on-canvas drill-down. These artifacts are appearing in Chrome, Opera, & Firefox for the Mac (Yosemite). The slide effect doesn't work in Safari (8.05). ios9.2.1 iPhone works ok.

On the the PC, everything is fine using IE 7-Edge, under Windows 10 emulation.
However Chrome shows a right vertical artifact.

If you have a desktop Mac available you see the effect in the Foundation docs for the drilldown using Firefox (43.04) and Chrome (48). http://foundation.zurb.com/sites/docs/drilldown-menu.html

I don't see an issue in Chrome inspector, but I don't have the necessary javascript skills to say anything more. The page can be seen at dev.curvedesign.ca/greens (for the time being)

Source html:

            <div class="menu-container">
                <ul class="vertical menu" data-drilldown>
                  <li><a href="#">Your New Home</a></li>
                  <li><a href="#">Built on Tradition</a></li>
                  <li><a href="#">Design Guidelines</a></li>
                  <li><a href="#">Planning Your Home</a></li>
                  <li><a href="#">Available Lots</a>
                    <ul class="vertical menu">
                      <li><a href="#">Concept Plan</a></li>
                      <li><a href="#">Park Concept Plan</a></li>
                      <li><a href="#">Phase 1</a>
                        <ul class="vertical menu">
                          <li><a href="#">Phase 1 Stage 1</a></li>
                          <li><a href="#">Phase 1 Stage 1 Grading Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2 Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2A Grading Plan</a></li>
                          <li><a href="#">Phase 1 Stage 2B Grading Plan</a></li>
                        </ul>
                      </li>  
                      <li><a href="#">Phase Two</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Stage 1A Plan</a></li>
                          <li><a href="#">Stage 1A Grading Plan</a></li>
                          <li><a href="#">Stage 1B Plan</a></li>
                          <li><a href="#">Stage 1B Grading Plan</a></li>
                          <li><a href="#">Stage 2A Plan</a></li>
                          <li><a href="#">Stage 2A Grading Plan</a></li> 
                          <li><a href="#">Stage 2B Plan</a></li>
                          <li><a href="#">Stage 2B Grading Plan</a></li>   
                        </ul>        
                      </li>
                      <li><a href="#">Phase Three</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Phase 3 Plan</a></li> 
                          <li><a href="#">Phase 3 Grading Plan</a></li> 
                        </ul>  
                      </li>  
                      <li><a href="#">Phase Four</a>
                        <ul class="vertical menu"> 
                          <li><a href="#">Stage 1 Plan</a></li> 
                          <li><a href="#">Stage 1 Grading Plan</a></li> 
                          <li><a href="#">Stage 2 Plan</a></li> 
                          <li><a href="#">Stage 2 Grading Plan</a></li> 
                        </ul>     
                      </li> 
                      <li><a href="#">Phase Six</a>
                         <ul class="vertical menu"> 
                          <li><a href="#">Phase 6 Plan</a></li> 
                          <li><a href="#">Phase 6 Grading Plan</a></li>
                          <li><a href="ph6-park.html"> Neighbourhood Park</a></li> 
                         </ul> 
                      </li>  
                   </ul>
                  </li>       
                  <li><a href="showhomes.html">Current Show Homes</a></li>
                  <li><a href="builders.html">Find a Builder</a></li>
                  <li><a href="contact.html">Contact Us</a></li>  
                </ul>

            </div><!--//Menu -->

Rafi Benkual almost 4 years ago

Ok thanks for the added info - that helps! It looks to me like it's the menu getting some kind of focus state. The outline is added in order to highlight sections for visual impairment. It does appear to be in the wrong place. You can see it on the docs and here dev.curvedesign.ca/greens

I think this could be a good one to report on GitHub. Something tells me the JS is adding the focus.

Rafi Benkual almost 4 years ago

Can you post back the GitHub issue so we can share solutions or when it's resolved?

Brian Danchuk almost 4 years ago

Done.

Screen artifact in drilldown menu #8177

Thanks for your comments, Rafi.

Brian Danchuk almost 4 years ago

A simple work-a-round to get past the issue (in FIrefox and much better in Chrome) is to put a border on the focus state.

.vertical.menu li a{
color: $black;
background-color: $primary-color;
}
.vertical.menu * a:focus{
border-style: solid;
border-color: $primary-color;
border-width: 1px;
}

This works for a very simple styling of the menu.

Rafi Benkual almost 4 years ago

Here's the link - https://github.com/zurb/foundation-sites/issues/8177

Thanks for posting back your workaround! I tried it and it is a good temp solution.