Question

我的加载屏幕是我更改选项时显示的模式。在模态中，我有一个旋转的Font Awsome fa-circle-o-notch。在Firefox或Google Chrome中，圆圈旋转，但是在safari中却不行，至少当我调用$('#blocking-modal').modal('show');或通过safari的调试器控制台进行调试时，我会调用settimeout。

这是模态代码：

$("#saveBtn").click(function (e) {
            $('#blocking-modal').modal('show');
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Ej0hUpn6wbrOTJtRExp8jvboBagaz+Or6E9zzWT+gHCQuuZQQVZUcbmhXQzSG17s" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" integrity="sha384-VI5+XuguQ/l3kUhh4knz7Hxptx47wpQbVRDnp8v7Vvuhzwn1PEYb/uvtH6KLxv6d" crossorigin="anonymous"></script>
 <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-X7L1bhgb36bF1iFvaqvhgpaGpayKM+vXNNYRlF89BFA5s3vi1qZ8EX9086RlZjy1" crossorigin="anonymous">
 
</head>
<body>
<div class="modal" id="blocking-modal" tabindex="-1" data-backdrop="static" data-keyboard="false" role="dialog" aria-describedby="waiting" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" align="center" style="font-size: 30px;background-color: black ; color: white;height: 0px;width:0px;margin-left: auto;margin-right: auto;margin-top: 48%;padding-top: 1px; ">
            <span style="display:block"><i id="blockSpinner" class="fa fa-circle-o-notch fa-1x fa-spin" style="display:inline-block"></i></span>                
        </div>
    </div>
</div>
<div>
<button type="submit" id="saveBtn" class="btn btn-primary">
       Accept
    </button>
</div>

</body>

感谢您的帮助。

字体真棒fa-circle-o-notch fa-spin不会在safari上旋转

0 个答案: