Firefox & Safari Input Text

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container-fluid">
        <div class="container">
            <form>
                <div class="row page-header">
                    <div class="col-xs-10">
                        <div class="form-group">
                            <input type="text" name="Worksheet-Name" class="form-control input-lg" placeholder="Worksheet Name..." aria-label="Write worksheet name here"> </div>
                    </div>
                </div>
                <div class="worksheet-problems">
                    <div id="row-1" class="row worksheet-row">
                        <div class="col-md-7">
                            <div class="form-group">
                                <div class="input-group input-group-lg worksheet-problem">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default button-bullet"> <span class="glyphicon glyphicon-one-fine-dot" aria-hidden="true"></span> </button>
                                    </div>
                                    <input type="text" name="Worksheet-Problem" class="form-control" placeholder="Problem..." aria-label="Write worksheet problem here">
                                    <div class="input-group-btn">
                                        <button type="button" class="btn btn-default button-add" aria-label="Add"> <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span> </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
      ...

CSS

/*import custom font*/
@import 'https://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';

.container-fluid{
    background-color: #86E1D8;
}

/*Page*/
.container{
    margin-top: 50px;
    height: 100vh;
    background-color: white;
    font-family: 'Work Sans', sans-serif;
    /*Background shadow*/
    -webkit-box-shadow: 1px 1px 13px 3px rgba(155,155,155,1);
    -moz-box-shadow: 1px 1px 13px 3px rgba(155,155,155,1);
    box-shadow: 1px 1px 13px 3px rgba(155,155,155,1);
}

/*remove header grey line*/
.page-header{
    border-bottom:none;
}

/*Get rid of that blue outline when input text*/
/*.form-control{
    border: none;
    border-color: #cccccc;
    -webkit-box-shadow: none;
    box-shadow: none;
}*/

/*Get rid of blue outline Chrome*/
.btn:focus,.btn:active:focus,.btn.active:focus,
.btn.focus,.btn:active.focus,.btn.active.focus {
    outline: none;
}

.btn{
  border:0px solid transparent;
 }

/*Buttons*/
.button-add{
    display: none;
}

#Done-Button{
    margin-right: 20px;
    background-color: white;
}

/*get rid of grey shadow when press on buttons*/
.btn.button-add, .btn.button-bullet, .btn.button-bullet:active, .btn.button-bullet:focus {
    box-shadow: none;
  -webkit-box-shadow: none;
}

/*get rid of Boostrap default grey for buttons*/
.btn.button-add, .btn.button-bullet {
  background-color: transparent;

}

.btn.button-add:hover, #Done-Button:hover{
    background-color: #E5FFFB;
}

.btn.button-add:active, .btn.button-add:focus{
    background-color: #02C8A7;
}

.glyphicon-plus-sign:active, .glyphicon-plus-sign:focus{
    color: #E5FFFB;
}

.btn.light-red-background{
  background-color: #FCC1C5;
}

.glyphicon-minus-sign, .glyphicon-plus-sign{
    font-size: 28px;
}

.glyphicon-minus-sign{
    color: #F53240;
}

.glyphicon-plus-sign, .glyphicon-ok-sign{
    color: #02C8A7;
}

.glyphicon-ok-sign {
    font-size: 70px;
}

/*Circle icon*/
.glyphicon.glyphicon-one-fine-dot {
    margin-top: -1.4em;
    overflow:...

JavaScript

$(document).ready(function () {
    
    $(".worksheet-problems").on("mouseenter", ".form-group", function () {
        $(this).find(".button-add").fadeIn(100);
        if ($(".worksheet-problems").children().length > 1) {
            $(this).find(".button-bullet").children(".glyphicon").removeClass("glyphicon-one-fine-dot");
            $(this).find(".button-bullet").children(".glyphicon").addClass("glyphicon-minus-sign");
        }
    });
    $(".worksheet-problems").on("mouseleave", ".form-group", function () {
        $(this).find(".button-add").fadeOut(100);
        if ($(".worksheet-problems").children().length > 1) {
            $(this).find(".button-bullet").children(".glyphicon").removeClass("glyphicon-minus-sign");
            $(this).find(".button-bullet").children(".glyphicon").addClass("glyphicon-one-fine-dot");
        }
    });
    
    $(".worksheet-problems").on("mouseenter mouseleave", ".button-bullet", function(){
        if ($(".worksheet-problems").children().length > 1) {
            $(this).toggleClass("light-red-background");
        }
    });
    
    $(".worksheet-problems").on("click", ".button-add", function () {
        //Clone row
        var $row = $(this).closest('.row');
        var $wsProbRow = $row.clone(true);
        $wsProbRow.find("input[type='text'][name='Worksheet-Problem']").val("");
        $wsProbRow.insertAfter($row);
            //give it unique ID
        $wsProbRow.prop("id", "row-" + $(".worksheet-row").length);
        //console.log($wsProbRow.prop("id"));
        //Change color of Add button
        /*$(this).css("background-color", "#02C8A7");
        $(this).children(".glyphicon").css("color", "#E5FFFB");*/
    });
    
    /*$(".worksheet-problems").on("active focus", ".button-add", function(){
        $(this).css("background-color", "transparent");
        $(this).children(".glyphicon").css("color", "#02C8A7");
        
    });*/
    
    //Input worksheet name
    var worksheetName = "Subtraction Problems"
...