CSS / Javascript - fadeIn 效果在 Safari 上不起作用答案

【问题标题】：CSS / Javascript - fadeIn effect not working on SafariCSS / Javascript - fadeIn 效果在 Safari 上不起作用
【发布时间】：2018-04-01 15:34:33
【问题描述】：

我正在将一个前端站点加载到 Wordpress 上，并加载了一些 javascript 文件，其中一个是用于主页上各部分的淡入淡出效果。在 Firefox 和 Chrome 上一切正常，但在 Safari 中不起作用，我不知道为什么。基本上，opacity: 0; 规则坚持在 Safari 中，所以当我向下滚动时，我只会得到一个底部有页脚的空白页。

浏览器中没有任何真正的标记，所以我有点卡住了。

这是代码 -

FadeIn.js

jQuery(document).on("scroll", function () {
  var pageTop = jQuery(document).scrollTop()
  var pageBottom = pageTop + jQuery(window).height()
  var tags = jQuery("section")

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i]

    if (jQuery(tag).position().top < pageBottom) {
      jQuery(tag).addClass("visible")
    } else {
      jQuery(tag).removeClass("visible")
    }
  }
})

  // Have put jQuery instead of $ due to error flagging up in Wordpress

style.css

/* Fade in/out */

section {
  opacity: 0;

  transform: translate(0, 10px); 
  transition: all 1s;
}

section.visible { 
  opacity: 1;
  transform: translate(0, 0); 
}


/*  ---------------------- */

functions.php

function html5blankchild_all_scriptsandstyles() {
//Load JS and CSS files in here
  wp_register_script ('jquery', get_stylesheet_directory_uri() . 'https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
  wp_register_script ('smooth-scroll', get_stylesheet_directory_uri() . '/js/smooth-scroll.js', array('jquery'));
  wp_register_script ('fadein', get_stylesheet_directory_uri() . '/js/fadein.js', array('jquery'));
  wp_register_script ('ps', get_stylesheet_directory_uri() . '/js/ps.js',true);
  wp_register_style ('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
  wp_register_style ('bootstrap', 'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css');
  wp_register_style ('normalize', 'https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css');
  wp_register_style ('style', get_stylesheet_directory_uri() . '/style.css');

  wp_enqueue_script('jquery');
  wp_enqueue_script('ps');
  wp_enqueue_style( 'font-awesome');
  wp_enqueue_style( 'bootstrap');
  wp_enqueue_style( 'normalize');
  wp_enqueue_style( 'style');
  if ( is_front_page() ) {
  wp_enqueue_script('fadein');
  }
  if ( is_front_page() ) {
  wp_enqueue_script('smooth-scroll');
  }

}
add_action( 'wp_enqueue_scripts', 'html5blankchild_all_scriptsandstyles' );

更新 -

header.php

<head><!-- head code goes here --><?head> 
<body <?php ?>>

        <header>
        <nav>
            <a href="<?php the_permalink(4); ?>#particle-slider">Home</a>
            <a href="#what">What we do</a>
            <a href="#who">Who we are</a>
            <a href="#partners">Who we work with</a>
            <a href="#contact">Say hello</a>
            <a href="<?php the_permalink(70); ?>">Blog</a>
        </nav>
    </header>

Contact.php

<?php /* Template Name: contact */ ?>
<!-- contact template -->

        <section id="contact">
            <div class="container-fluid">
                     <div class="secthead"><span style="color: rgb(63,190,150);">&#43;</span><h1>Say hello</h1></div>
                        <div class="row no-gutters">
                            <div id="hello">        
                                <p>If you would like to receive a quote for a design project, chat about the weather or send us some chocolates, please pop an email in our inbox, call us or write
                                us an old fashioned letter on the below contact details</p> 
                            </div>
                        </div>  
            </div>          
        </section>
<!-- contact template -->

【问题讨论】：

标签： javascript jquery css wordpress

【解决方案1】：

您是否等到文件准备好？此外，您可以使用 jQuery 的 noConflict() 模式，而不是总是显式地写 jQuery。试试下面的代码。通过使用 jQuery 而不是 vanilla 循环、将变量放在处理程序之外、在窗口上使用滚动等进行了优化。

$.noConflict();

jQuery(document).ready(function($) {
  var win = $(window),
    doc = $(document),
    tags = $("section");

  win.on("scroll", function() {
      tags.each(function(i, tag) {
        if ($(tag).position().top < (doc.scrollTop() + win.outerHeight())) {
          $(tag).addClass("visible");
        } else {
          $(tag).removeClass("visible");
        }
      });
    }
  });
});

【讨论】：

我实际上为此使用了一篇简短的教程文章——以前从未将它包含在网站中。它可以在 Chrome 和 Firefox 上正常工作，但令人沮丧的是在 Safari 上无法正常工作。我尝试了几个没有冲突的修复，但它们没有工作 - 我会试试这个。谢谢。
我已经应用了您的代码，但现在我的所有浏览器都出现空白屏幕。很奇怪，这可以作为一个独立的前端站点，但不能在 wordpress 中工作。
在这种情况下，请向我们提供一个最小可验证示例。一段完整的精简 HTML 代码，其中包含我们可以用来测试的基本要素。在您的原始帖子中添加“代码 sn-p”。只是 PHP sn-ps 不好。我们需要的是输出 HTML，但只保留其基本要素。
我很高兴这样做，但正如我所说的那样，裸 HTML 可以工作 - 当我将它加载到 Wordpress / Safari 时，我遇到了问题。在 Chrome 和 Firefox 上像梦一样工作。我会做一个codepen链接并更新我的答案。
我刚刚在我的控制台中发现了这个错误 - Uncaught SyntaxError: missing ) after argument list - 你能看出什么地方出了问题吗？

【解决方案2】：

对于 Safari 使用 webkit

section {
  opacity: 0;
  -webkit-transform: translate(0, 10px); 
  -webkit-transition: all 1s;
  transform: translate(0, 10px); 
  transition: all 1s;
}

section.visible { 
  opacity: 1;
  -webkit-transform: translate(0, 0); 
  transform: translate(0, 0); 
}

【讨论】：

我已经从其中一个部分和 header.php 添加了 html 代码，完整的 js 代码用于淡入淡出效果。