jQuery window.onscroll侦听器在Safari中未显示和显示：内联

Question

I am testing in Safari 11.0.3

Site: https://3milychu.github.io/met-erials

I have the following function to create a header that pops out the selected item upon scroll

function scrollState () {


var elmnt = document.getElementById("title");
var rep = elmnt.offsetTop;

if (window.pageYOffset >= elmnt.offsetHeight) { 
       // $('input:not(:checked').parent().hide();
       $('input:not(:checked').parent().css("display","none");
       $("input:checked").css("display", "inline");
        $("label").css("marginLeft", "35%");
       $("label" ).css("fontSize", "4em");
       $("label" ).css("textAlign", "center");
       $("input:checked").css("float", "none");
        $("input:checked").css("verticalAlign", "top");
       $("input[type=radio]").css("width", "3em");
       $("input[type=radio]").css("height", "3em");
        $("input:checked").css("fontSize", "0.5em");
} else  {
        $("input:checked").css("display", "inline")
        $("label").css("marginLeft", "0%");
        $("label" ).css("textAlign", "none");
       $("input:checked").css("float", "right");
       $("input[type=radio]").css("width", "2em");
       $("input[type=radio]").css("height", "2em");
        $("input:checked").css("fontSize", "11px");
        // $('input:not(:checked').parent().show();
        $('input:not(:checked').parent().css("display","inline-block");
        $("label").css("fontSize", "1.5em");

    };
};

I call it by:

window.onscroll = function() {scrollState()};

Why is this not working in Safari? I commented out the .hide() method after seeing that Safari needs it to be replaced with .css("display","none").

This works in Chrome and Firefox as desired (when you use the .hide() and .show() methods)

Answer 1

您的$('input:not(:checked').parent().css("display","none"); （替换.show()那个）需要为('display', 'inline-block') ？您希望元素显示，但是您正在编写('display', 'none')

Answer 2

There was a syntax error.

$('input:not(:checked').parent().css("display","inline-block");

should be

$('input:not(:checked)').parent().css("display","inline-block");

This resolved the issue.