javascript - 启动画面水平定位不一致

Question

我正在创建一个网站，其中显示 gif 动画作为启动屏幕。不幸的是，在 iPhone 上查看时的水平尺寸不一致。 当网站首次加载时，动画 gif 会出现在屏幕中央的右侧。如果重新加载网站，那么它似乎工作得很好。

非常感谢您的建议:)

这是代码:

<小时/>

HTML

<div id="overlay">
<div id="overlay-content"><img src='videosmall.gif'></div>
</div>

<小时/>

CSS

#overlay {
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: rgb(222, 222, 222);
}

#overlay-content {
  position: fixed;
  display: none;
}

<小时/>

JavaScript (jQuery)

function main() {
  $('#overlay').show();
  $('#overlay-content').show().center();
}


setTimeout(function() {
  $("#overlay").fadeOut();
  $('.i3section').fadeIn(5000);
}, 5000);



$.fn.center = function() {
  this.css("position", "absolute");
  this.css("top", Math.max(0, (
      ($(window).height() - $(this).outerHeight()) / 2) +
    $(window).scrollTop()) + "px");

  this.css("left", Math.max(0, (
      ($(window).width() - $(this).outerWidth()) / 2) +
    $(window).scrollLeft()) + "px");
  return this;
}

$(document).ready(main);

Answer 1

您应该尝试使用 CSS 来定位叠加层及其内容，以避免此问题。
+ 动画会更加流畅

示例:

HTML

<div id="overlay">
  <img src='https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66'>
</div>

CSS

#overlay {
  /* Display overlay in fullscreen */
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* Center it's content */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Add nice animation */
  transition: visibility 0.4s, opacity 0.4s;

  /* While it's hidden */
  visibility: hidden;
  opacity: 0;
}
#overlay.open {
  /* While it's shown */
  visibility: visible;
  opacity: 1;
}
#overlay img {
  /* Styling image */
  display: block;
  width: 128px;
  height: auto;
}

JS

/* Showing the overlay */
$('#overlay').addClass('open');

setTimeout(function () 
{
  /* Hiding the overlay */
  $('#overlay').removeClass('open');
}, 3000);

fiddle : https://jsfiddle.net/JacobDesight/vkga6mhk/