Labels and grid digits position

[gkiosov]

I can't understand why I have wrong position for labels and grid digits after the first init (and it's comes back after the first value change) in macOS X Safari 10.1.2 (all fine in Google Chrome for example). Can't realise what I am missing there. I just broke my head. Here is an example: http://lab.pixiedesign.ru/projects/4px/index.html (and screenshot also just in case — http://lab.pixiedesign.ru/projects/4px/ionrange.png).

[IonDen]

That is an interesting Safari bug! I will investigate.

[Martinomagnifico]

I had a similar problem, turned out it was the font-family. Something to do with Open Sans. I have body {font-family: 'Open Sans', sans-serif;}. I overruled that rule with

    .irs {
        font-family: sans-serif;
    }

That fixed the offset in Safari. I tested it with your page, and it is indeed the same issue.

[Martinomagnifico]

It is likely a problem with any font that is not loaded yet when the js is run. A possible solution is using Google Webfont Loader. Then you can use:

.irs {
    font-family: sans-serif;
    .wf-active & {
        font-family: 'Open Sans', sans-serif;
    }
}

or run the js like this:

$(window).bind("load", function() {
    $(".ionrange").ionRangeSlider({options})
});

which will only run when all the assets, including the fonts, have been loaded.

[gkiosov]

Thank, @Martinomagnifico

[IonDen]

@Martinomagnifico, thanks for finding the solution.

[Standupic]

Thank, @Martinomagnifico