Why CSS' is not working properly in mozilla firefox and internet explorer?

Question

I'm designing a zoom control using html css and javascript, but it does not work properly in all browser.

I am using css to make range-input as zoom slider and div as joystiq navigation control, it works fine in google chrome but it does not work in mozilla firefox and internet explorer.

$(document).ready(function () {
    $('#pan_circle').draggable({
        containment: "#parent_pan",
        revert: true,
        revertDuration: 50
    });
});
document.getElementById("plus_zoom").addEventListener("mousedown", magnifyControl);
document.getElementById("plus_zoom").addEventListener("mouseup", normalControl);
document.getElementById("plus_zoom").addEventListener("click", zoomIn);
document.getElementById("minus_zoom").addEventListener("mousedown", magnifyControl);
document.getElementById("minus_zoom").addEventListener("mouseup", normalControl);
document.getElementById("minus_zoom").addEventListener("click", zoomOut);
function magnifyControl(e) {
    e.target.style.opacity = "0.25";
}
function normalControl(e) {
    e.target.style.opacity = "1";
}
function zoomIn() {
    var zoom = document.getElementById("zoom_slider").value;
    document.getElementById("zoom_slider").value = zoom - (-25);
}
function zoomOut() {
    var zoom = document.getElementById("zoom_slider").value;
    document.getElementById("zoom_slider").value = zoom - 25;
}

input[type=range][orient=vertical] {
    width: 184px;
    transform: rotate(-90deg);
    transform-origin: top;
    position: relative;
    left: -87px;
    bottom: -52px;
}

.zoom_slider {
    -webkit-appearance: none;
    height: 2px;
    border-radius: 5px;
    background: black;
    outline: none;
    opacity: 0.5;
    transition: opacity .2s;
}

    .zoom_slider:hover {
        opacity: 0.7;
    }

    .zoom_slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: black;
        cursor: pointer;
    }

    .zoom_slider::-moz-range-thumb {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: black;
        cursor: pointer;
    }

    .zoom_slider:hover::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: black;
        cursor: pointer;
    }

    .zoom_slider:hover::-moz-range-thumb {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: black;
        cursor: pointer;
    }

.zoom_range {
    position: absolute;
    top: 140px;
    left: 30px;
    background-color: #CFD1CE;
    height: 225px;
    width: 12px;
    border-radius: 3px;
}

.zoom_hr1 {
    border-color: white;
    position: relative;
    top: -23px;
}

.zoom_hr2 {
    border-color: white;
    position: relative;
    top: 125px;
}

#zoom_polygon {
    position: relative;
    top: 50px;
}

.plus_zoom {
    position: relative;
    left: 2px;
    font-size: 14px;
    font-weight: bold;
    cursor: pointer;
}

.minus_zoom {
    position: relative;
    left: 3px;
    top: 100px;
    font-size: 17px;
    font-weight: bold;
    cursor: pointer;
}

#panning_container {
    height: 70px;
    width: 70px;
    background-color: #CFD1CE;
    -webkit-clip-path: polygon(0 35%, 35% 35%, 35% 0, 65% 0, 65% 35%, 100% 35%, 100% 65%, 65% 65%, 65% 100%, 35% 100%, 35% 65%, 0 65%);
    clip-path: polygon(0 37%, 35% 36%, 35% 0, 65% 0, 65% 36%, 100% 36%, 100% 63%, 65% 63%, 65% 100%, 36% 100%, 36% 64%, 0 64%);
}

#top_arrow {
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    height: 6px;
    width: 10px;
    background-color: #636663;
    position: relative;
    top: 3px;
    left: 30px;
}

#right_arrow {
    -webkit-clip-path: polygon(0 0, 0% 100%, 100% 50%);
    clip-path: polygon(0 0, 0% 100%, 100% 50%);
    height: 10px;
    width: 6px;
    background-color: #636663;
    position: relative;
    top: 23px;
    left: 60px;
}

#bottom_arrow {
    -webkit-clip-path: polygon(0 0, 50% 100%, 100% 0);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
    height: 6px;
    width: 10px;
    background-color: #636663;
    position: relative;
    top: 44px;
    left: 30px;
}

#left_arrow {
    -webkit-clip-path: polygon(0 50%, 100% 100%, 100% 0);
    clip-path: polygon(0 50%, 100% 100%, 100% 0);
    height: 10px;
    width: 6px;
    background-color: #636663;
    position: relative;
    top: 8.5px;
    left: 4px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<div>
        <div id="zoom_polygon" style="height:70px;width:70px;">
            <div id="panning_container">
                <div id="top_arrow"></div>
                <div id="right_arrow"></div>
                <div id="bottom_arrow"></div>
                <div id="left_arrow"></div>
                <div id="parent_pan" style="background-color:none;height:40px;width:40px;position:relative;top:-17px;left:15px;">
                    <div id="pan_circle" style="width:18px;height:18px;background-color:#636663;border-radius:9px;position:relative;top:10.3px;left:11.3px;"></div>
                </div>
            </div>
        </div>
        <div class="zoom_range">
            <span class="plus_zoom" id="plus_zoom">+</span>
            <hr class="zoom_hr1" />
            <input type="range" name="zoom" value="100" max="1000" min="1" orient="vertical" class="zoom_slider" id="zoom_slider" />
            <hr class="zoom_hr2" />
            <span class="minus_zoom" id="minus_zoom">-</span>
        </div>
    </div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

I want that it work properly in all browser , Please any-one help to solve it or suggest me a similar answer.

Answer 1

The problem here is Chrome doesn't support the orient="vertical" html attribute (link) and hence for that reason you are using the transform: rotate(-90deg); css property to make the slider appear vertical.

However, since Firefox supports vertical orientation, the transform property rotates the slider back to horizontal and the height and the width properties of the slider gets interchanged. In Firefox, you are actually seeing a horizontal slider of width 2px ( and hence unable to move the slider) and height 184px;

You can remove the orient="vertical" html attribute from the range input and make necessary modifications in corresponding css rules. Fiddle ( check both in Chrome and Firefox ).

Or, you can use -webkit-appearance: slider-vertical; css property for chrome to make the slider appear vertical , while using the HTML5 attribute orient="vertical" for firefox.

NOTE: I have still not tested the code in IE. I will post an update here.