1px глюк в слайдере jQuery в Chrome - PullRequest
Новая
       25

1px глюк в слайдере jQuery в Chrome

0 голосов
/ 26 октября 2018

Я использую слайдер из пользовательского интерфейса jQuery, где каждая метка имеет ширину 1px.

Вот как это выглядит в Firefox и Safari:

enter image description here

Это верно.

Но вот как это выглядит в Chrome:

enter image description here enter image description here

Это странный глюк, уникальный для Chrome.Я попробовал box-sizing и box-shadow после просмотра похожих вопросов, но мне не удалось сделать так, чтобы эти отметки выглядели правильно.

Если я установлю его на 2 пикселя:

enter image description here

Все отметки отображаются, но все еще сбои.

Если необходим код:

HTML: 

<div id="slider"></div>

JS: 

function createSlider() {
    $("#slider").slider({
        min: 1,
        max: numOfPages * 3, 
        step: 1, 
        range: false,
        orientation: 'horizontal',
        create: function(event, ui) { 
            setSliderTicks(event.target);
        }
    });
}

function setSliderTicks(){
    var $slider =  $('#slider');
    var max =  $slider.slider("option", "max");    
    var spacing =  100 / (max - 1);
    console.log('Spacing: ' + spacing);

    $slider.find('.tickmark').remove();
    for (var i = 0; i < max ; i++) {
        $('<span class="tickmark"></span>').css('left', (spacing * i) +  '%').appendTo($slider); 
     }
}

CSS: 

#slider {
    width: ;
    margin: 0 auto;
}

.ui-slider-horizontal {
    height: 3px;
    width: 75%;

}

.ui-slider {
    border: 0;
    background-color: #ededed;
    border-radius: 6px;
    top: 50%;
}

.ui-slider-handle {
    width: 19px;
    height: 18px;
    background-color: #ededed;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    top: 50%;
    margin-top: -4px;
}

.ui-slider-handle:hover {
    opacity: 0.8;
}

.tickmark {
    display:inline-block;
    width: 1px;
    background-color: #ededed;
    height: 12px;
    position:absolute;
    top: -150%;
}

Слайдер от https://code.jquery.com/ui/1.12.1/jquery-ui.min.js и https://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css

...