javascript - 开机画面水平定位不一致

我正在创建一个将动画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);

最佳答案

您应该尝试通过使用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);

小提琴：
https://jsfiddle.net/JacobDesight/vkga6mhk/

关于javascript - 开机画面水平定位不一致，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44606713/