Chromeでは正しく表示されるが、Firefoxではレイアウトが崩れる問題が発生しております

###問題点
slick.jsを使って、スライダーをウェブサイトに設置しようと試みています。
Chromeでは想定通りに表示されますが、Firefoxではレイアウトが崩れてしまいます。

###試したこと
・リセットCSS「ress.css」を利用

###具体的な問題点
スライダーをレスポンシブデザインに対応させるため、ウィンドウ幅を変えて試行しています。
Chrome: ウィンドウ幅に応じてスライダーの大きさが変化する
Safari: ウィンドウ幅に応じてスライダーの大きさが変化する
Firefox: ウィンドウ幅が縮小するとスライダー内に原因不明の余白が生じる

###コード
.sliderのサイズの可変を試みています。videoに関しては問題なくサイズが変化します。

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <meta http-equiv="X-UA-Compatible" content="ie=edge">
7  <title>Inn the Park</title>
8  <link rel="stylesheet" href="/style2.css">
9  <link rel="stylesheet" href="/slick/slick.css">
10  <link rel="stylesheet" href="/slick/slick-theme.css">
11</head>
12<body>
13
14<div class="content-wrapper">
15  <div class="slider">
16    <div class="image">
17      <img src="/img/Screenshot.jpg" alt="">
18    </div>
19    <div class="image">
20      <img src="/img/Screenshot2.jpg" alt="">
21    </div>
22  </div>
23  
24  <div class="video-wrapper">
25   <span id="video-banner">video</span>
26   <video src="/img/ScreenRecording.mov"></video>
27  </div>
28</div>
29
30  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
31  <script src="/slick/slick.js"></script>
32  <script src="/js/script.js"></script>
33</body>
34</html>

css
1.slider {
2  width: 40%;
3  height: 22.22vw;
4}
5
6.slider .image {
7  height: 100%;
8  width: 100%;
9  display: block;
10}
11
12.slider .image img {
13  height: 100%;
14  width: 100%;
15}
16
17/*以下補足*/
18
19* {
20  padding: 0;
21  margin: 0;
22}
23
24body {
25  width: 100%;
26  height: 100%;
27  overflow-x: hidden;
28  background-color: #f7f7f7;
29}
30
31html {
32  width: 100%;
33  height: 100%;
34}
35
36.video-wrapper {
37  width: 40%;
38  height: auto;
39  position: relative;
40  display: inline-block;
41}
42
43.video-wrapper:hover {
44  cursor: none;
45}
46
47.video-wrapper::before {
48  content: "";
49  display: block;
50  height: auto;
51  padding-top: calc(803 / 1440 *100%);
52}
53
54.video-wrapper #video-banner {
55  position: absolute;
56  top: 10px;
57  left: 10px;
58  background-color: rgba(0, 0, 0, 0.5);
59  color: white;
60  padding: 5px 20px;
61  border: 1px solid rgba(255, 255, 255, 0.5);
62  border-radius: 30px;
63}
64
65.video-wrapper video {
66  position: absolute;
67  top: 0;
68  left: 0;
69  height: auto;
70  width: 100%;
71  z-index: -100;
72}
73
74.content-wrapper {
75  display: -webkit-box;
76  display: -ms-flexbox;
77  display: flex;
78  -webkit-box-pack: center;
79      -ms-flex-pack: center;
80          justify-content: center;
81  -webkit-box-align: center;
82      -ms-flex-align: center;
83          align-items: center;
84  -ms-flex-pack: distribute;
85      justify-content: space-around;
86  height: 100%;
87}

js
1$(function(){
2  
3  var $video = $('.video-wrapper');
4    $video.on('mouseenter', function(){
5      $('video').get(0).play();
6      $('#video-banner').css('display', 'none');
7    });
8    $video.on('mouseout', function(){
9      $('video').get(0).pause();
10      $('#video-banner').css('display', 'block');
11    });
12
13    $(".slider").slick({
14      dots: false,
15      vertical: false,
16      slidesToShow: 1,
17      slidesToScroll: 1,
18    });
19
20});

状態が再現できるコードを追記いたしました。

mix-peach

2019/10/16 08:51

slickを適用している箇所が、不明なのでjsのコードもあった方がいいと思います。一応手元で、.sliderに対してslickを適用して確認してみましたが、記載のHTMLとCSSだけでは「余白の発生」が再現しないようでした。再現可能な範囲までコード（HTMLとcss両方）の追加していただけますか？また、実際に「余白がどこに発生しているか」が分かるような、画像等を添付してもらえるとより伝わりやすいと思います。

us_k

2019/10/17 08:06

ご返信ありがとうございました。余白ですが、貼り付けた画像の通り、スライダーの高さが高くなり、スライダー内の画像のサイズは変わらないといった状況です。空白がどこに発生しているかは不明です。といいますのも、要素の調査を実行した瞬間に、想定通りに動作するためです。

mix-peach

2019/10/18 05:16

>要素の調査を実行した瞬間に、想定通りに動作するなるほど。。。?　要素の調査を実行した瞬間・・・とは、最初から開いているコンソールで要素選択をしようとした瞬間に。。。って感じですか？追加頂いたコードを反映して（slickのファイルだけ、//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/で読み込んでますが）、windowsのFirefox(最新版）で再度確認してみたのですが、やはり縮小時にスライダーだけ高さが高くなる・・という状態が発生しないようです・・・。もしかして、macでしょうか？　あるいは、slickのバージョンが違ってますか？？もし、slickのバージョンが異なるのであれば、1.8.1の最新版を使うと解決するかもしれません。ちなみに、slickに限らず、他のJSでもエラーなどは出ていない状態ですよね？

us_k

2019/10/18 10:47

ご協力いただきまして誠にありがとうございます。この問題の原因がわかるまでそれを無視してコーディングを続けていたのですが、本日から急にこの問題が発生しなくなりました。原因不明なので再発するのが嫌だなと思います... 右クリックで要素の調査を押した瞬間に想定通りに動作しましたが、これが不思議でたまりませんね。ちなみに環境は MacOS Mojave ver.10.14.2 ですが、なにか影響はあるのでしょうか？他のJSではエラーが出ていませんでした。ひとまず解決というか、問題が消滅したのでこの質問は閉じてしまったほうがいいのでしょうか。

退会済みユーザー

2019/10/20 09:36

問題が解決したといのは、事実ではあるので、自己解決をして上記で書いた事をもう一度記載してください。解決済みではなかったので、回答を出そうとした所、問題が解決しているとい事を知りました。

mix-peach

2019/10/23 02:43

（時間が空いてしまってすみません） OSとブラウザの組み合わせで、レイアウトのズレ（1px単位でのズレ）や、jsも挙動が変わる可能性はあります。＞右クリックで要素の調査を押した瞬間に、リサイズイベントが発生し、上手くいってしまうのかも。。。現象が起きる前の時点から要素の調査を始めておいて、画面をリサイズしても隙間の位置は確認できませんか？本件は解決としても良いかも？とも思いますが、再発が心配とのことであれば、上記コードで問題自体は再現するのだと思いますし（私は現在手元にMacがないので、すぐに確認ができそうにないです。お役に立てず、すみません・・）、回答を募り続けても良いと思いますが・・・今時点で回答が付かないところをみると、もしかしたら今後も回答が付かないかもしれないですね；； > -apple-さんもし原因がお分かりなのであれば、回答してあげてはいかがでしょう？「原因がわかっての解決」ではありませんので、問題自体は残っている状態です。