Div based button menu has different behavior in different browsers

Question

I'm making a Button menu for a project for a web development course. I'm using <div>s to create the clickable menu that changes shades when hovering. I wanted it so that the user can't select the text (since it's a button). I'm using a flex layout scheme (at least I think I'm doing it correctly). I have the following code but it's behaving differently in different browsers. I included a screen cap link below that is from left to right Chrome, Firefox, and Safari.

Here's the code for the menubar:

<style type="text/css">

    .button {
      margin: 0;
      padding: 5px;
      background-color: #CCCCCC;
      height: 100%;
      font-family: helvetica, sans-serif;
      display: flex;
      align-items: center;
      user-select: none;
    }

    .buttonDivider {
      border-left: gray 1px solid;
      height: 100%;
    }

    .button:hover{
      background-color: gray;
      cursor: pointer;
    }

    #buttonBar {
      display: flex;
      border: gray 1px solid;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 auto;
      align-items: center;
      user-select: none;
    }

    #titleBar {
      display: flex;
      width: 100%;
      height : 40px;
      padding: 5px;
      background-color: #CCCCCC;
      user-select: none;
    }
    #titleText {
      display: flex;
      align-items: center;
      font-family: helvetica, sans-serif;
      font-size: 25px;
      font-weight: bold;
    }

    body{
      margin: 0;
      padding: 0;
    }
    div {
      margin: 0;
      padding: 0;
    }



  </style>

</head>

<body>
  <div id="titleBar">
    <span id="titleText">CodePlayer</span>
    <div id="buttonBar">
      <div id="buttonHTML" class="button">HTML</div>
      <div class="buttonDivider"></div>
      <div id="buttonCSS" class="button" style="user-select:none">CSS</div>
      <div class="buttonDivider"></div>
      <div id="buttonJS" class="button">JavaScript</div>
      <div class="buttonDivider"></div>
      <div id="buttonOutput" class="button">Output</div>
    </div>
  </div>

But as you can see from the video, the behavior is quite different in 3 browsers (all updated to the latest version as of this post, Chrome 56, Firefox 51, and Safari 10.0.3). Chrome is the closest. It prevents the user from selecting the text and on hover fills the entire area. The only weird thing is when you click and drag while it doesn't select the text, the cursor changes to the highlight cursor. Firefox is next best as it shades the entire button on hover, but doesn't obey user-select: none and as you can see, Safari neither fills in the entire box as the other two do on hover but also allows full selection.

Screencap here: Video of different behaviors in different browsers. From Left to Right: Chrome, FireFox, Safari

Am I doing something non-standard? Or are these bugs? and if so, is there a way to make them all behave properly? Thanks!

score 2 · Answer 1 · edited May 23 '17 at 10:31

Add the prefixes (-moz, -webkit, and -ms) before user-select on separate lines for functionality in other browsers:

#titleBar {
  display: flex;
  width: 100%;
  height : 40px;
  padding: 5px;
  background-color: #CCCCCC;
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

It looks like you have that code for user-select none in several locations like button and your HTML as you were trying to find where the error was. Removing the redundant code will help you as the project gets more complicated and having it only applied to the #titleBar ID and having it inherit down.

Mozilla has an explanation of user-select here: https://developer.mozilla.org/en-US/docs/Web/CSS/user-select

Here's a JSFiddle I made with that change as well: https://jsfiddle.net/0uvrpohp/1/

As for the issue with Safari and filling in the full height of the element I couldn't preview it through my Windows machine but this thread might be helpful: Chrome / Safari not filling 100% height of flex parent

Thanks Kylegill, The user agent trick did the trick. I see it's still considered "experimental" so no one supports it yet without a engine specific callout. And yes. I was trying it in every possible location to see if it made a difference and forgot to remove them. They're gone now. I see it's inherited from the parent element. Thanks. I figured out the safari issue which I posted below, thanks to your link. — FrostedCookies, Feb 21 '17 at 22:07

score 1 · Accepted Answer · answered Feb 21 '17 at 20:09

    .button {
      margin: 0;
      padding: 5px;
      background-color: #CCCCCC;
      height: 100%;
      font-family: helvetica, sans-serif;
      display: flex;
      align-items: center;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
    }

    .buttonDivider {
      border-left: gray 1px solid;
      height: 100%;
    }

    .button:hover{
      background-color: gray;
      cursor: pointer;
    }

    #buttonBar {
      display: flex;
      border: gray 1px solid;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 auto;
      align-items: center;
      user-select: none;
    }

    #titleBar {
      display: flex;
      width: 100%;
      height : 40px;
      padding: 5px;
      background-color: #CCCCCC;
      user-select: none;
    }
    #titleText {
      display: flex;
      align-items: center;
      font-family: helvetica, sans-serif;
      font-size: 25px;
      font-weight: bold;
    }

    body{
      margin: 0;
      padding: 0;
    }
    div {
      margin: 0;
      padding: 0;
    }

  <div id="titleBar">
    <span id="titleText">CodePlayer</span>
    <div id="buttonBar">
      <div id="buttonHTML" class="button">HTML</div>
      <div class="buttonDivider"></div>
      <div id="buttonCSS" class="button" style="user-select:none">CSS</div>
      <div class="buttonDivider"></div>
      <div id="buttonJS" class="button">JavaScript</div>
      <div class="buttonDivider"></div>
      <div id="buttonOutput" class="button">Output</div>
    </div>
  </div>

try using prefixes...

Thank you this fixed the issue. I see it's still labeled as an experimental tech so it's not accepted without the engine specific css tags. — FrostedCookies, Feb 21 '17 at 22:09

score 0 · Answer 3 · answered Feb 21 '17 at 20:08

0

I think I see the difference. Maybe this could help?

border-top-style: none;`
border-bottom-style: none;

answered Feb 21 '17 at 20:08

Boris

602
2
8
29

score 0 · Answer 4 · edited May 23 '17 at 10:31

As a follow up to the Safari specific issue, I found a better solution thanks to Kylegill's link. Link to 100% vertical fill issue

Under the answer:

"4. Nested Flex Containers (Recommended) Get rid of percentage heights. Get rid of table properties. Get rid of vertical-align. Avoid absolute positioning. Just stick with flexbox all the way through. Apply display: flex to the flex item (.item), making it a flex container. This automatically sets align-items: stretch, which tells the child (.item-inner) to expand the full height of the parent."

I got rid of the height:100%; in the .button class kept the align-items: center and under the #buttonBar container changed to align-items: stretch; and now it's working great in Safari and the other two browsers.

.button {
      margin: 0;
      padding: 5px;
      background-color: #CCCCCC;      
      font-family: helvetica, sans-serif;
      display: flex;
      align-items: center;
    }

    .buttonDivider {
      border-left: gray 1px solid;
      height: 100%;
    }

    .button:hover{
      background-color: gray;
      cursor: pointer;
    }

    #buttonBar {
      top: 0;
      left: 0;
      display: flex;
      border: gray 1px solid;
      border-radius: 5px;
      overflow: hidden;
      margin: 0 auto;
      align-items: stretch;
    }

Div based button menu has different behavior in different browsers

4 Answers4