Navbar dropdowns not working in Edge 42 since 0.7.5

[emielmolenaar]

This is about Bulma.

Overview of the problem

This is about the Bulma CSS framework

I'm using Bulma version [0.7.5] My browser is: not my browser, but our customers are using MS Edge 42

Description

When using MS Edge, the navbar dropdowns are not working. I am not sure if they were working in 0.7.4, but complaints started to flow in here since we upgraded to 0.7.5.

Steps to Reproduce

1. For example, visit https://bulma.io/ in Edge
2. Hover over "More"
3. Nothing happens

Expected behavior

1. For example, visit https://bulma.io/ in Edge
2. Hover over "More"
3. The dropdown opens

Actual behavior

1. For example, visit https://bulma.io/ in Edge
2. Hover over "More"
3. Nothing happens

We are having no issues at all in Chrome and Firefox.

For some reason, this line of CSS is not doing it's work in Edge I guess.

Edit: we have not problems with the dropdowns when running Bulma 0.7.4.

[net1957]

The same is true with IE11 It work in Bulma version 0.7.4 but not in 7.0.5

[emkajeej]

It's the :focus-within that actually breaks it. This pseudo is not supported in Edge yet. https://caniuse.com/#feat=css-focus-within

[net1957]

that changed in this commit: 4d3aad5

[jgthms]

Ah that’s a shame that Edge doesn’t default to :focus then. It seems to invalidate the whole declaration. Will fix.

[emielmolenaar]

Yeah if a browser encounters some CSS rules in a block with a property it does not recognize, the whole block will be ignored. I guess the blocks should be separated to make sure Edge falls back to :focus.

Luckily Edge will be moving to Chromium in the future :smile:

[hanscees]

well it doesnt work right in chrome either. Try to use it on a touchscreen. Navbar dropdown is broken for touchscreens. See newest bugreport.

[net1957]

@jgthms Any progress about this issue ? Regards

[highoncarbs]

I'd just like to add , even the forms are not being formatted correctly.

[Grummfy]

hello, does the PR that are just close fix the issue? if yes, i it possible to create a release?

thanks

[chrisrhymes]

To resolve this you can add the following scss to your site:

@include desktop {
    .navbar-item {
        &.is-hoverable:hover {
            .navbar-dropdown {
                display: block;
            }
        }
    }
}

[IDisposable]

https://github.com/jgthms/bulma/issues/2503#issuecomment-519650331 is most of the way there to get the drop down to appear, but you also have to set the opacity: 1; in that section to make the drop down appear.

That only half-fixes things because then if you try to move the mouse down to the dropdown section it will disappear. This is because IE11/old-Edge thinks you've moved off the wrapping div. I tracked this down to two things:

1. If the menu option has the is-boxed style, then the dropdown is styled with all sorts of nice padding and borders and pulled out of the flow (and this is where the opacity: 0 came from). So, if you need to support IE11/old-Edge then you may not use is-boxed at all.
2. If you're not using is-boxed as determined by 1 above, then the default styling of the navbar dropdown has a top-border of 2px. Once again IE will get confused when you mouse past that border and hide the dropdown again. So... the easiest thing to do here is to just add to your site-specific sass an override for the appropriate styling default with the following line before you @import /bulma.sass

$navbar-dropdown-border-top: 0px; // for IE11, we need no top border on navbar dropdown or the hover gets lost

[Jannick94]

This snippet worked for me for the .is-boxed modifier in IE11 and Edge.

.navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

Because IE ignores the entire ruleset when :focus-within is used, I copied this from the Bulma compiled source and placed it in my own stylesheet as a separate rule.

[adamdehaven]

For anyone not using the is-hoverable class, you may simply add this CSS rule:

.navbar-item.has-dropdown.is-active > .navbar-dropdown {
    display: block;
}

[nabilhassen]

@media screen and (min-width: 1024px) {
    .navbar-item.is-active .navbar-dropdown.is-boxed {
        opacity: 1;
        pointer-events: auto;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
}

If you are using JavaScript to toggle the "is-active" class then this will work for you on all browsers including IE and Edge.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[IlyaSemenov]

The actual fix would be to use postcss to fix the CSS (move :focus-within into individual rules):

import { Plugin } from 'postcss'

/**
 * postcss plugin: extract :focus-within into separate CSS rule.
 *
 * Legacy browsers ignore the entire rule if some selector has :focus-within.
 */
export default function () {
  return <Plugin>{
    postcssPlugin: 'extract-focus-within',
    Rule: rule => {
      if (rule.selectors.length > 1 && needExtract(rule.selector)) {
        const keep: string[] = []
        const extract: string[] = []
        for (const selector of rule.selectors) {
          if (needExtract(selector)) {
            extract.push(selector)
          } else {
            keep.push(selector)
          }
        }
        if (keep.length > 0) {
          rule.selectors = keep
          rule.cloneAfter({ selectors: extract })
        }
      }
    },
  }
}

const needExtract = (selector: string) => {
  return selector.indexOf(':focus-within') !== -1
}

Alternatively, use postcss-focus-within alongside its polyfill to achieve the same with javascript.