Hovering over an img element allows document scrolling in Firefox - html

Question

I am developing my portfolio website but I am encountering some issues in different browsers. When I go to the website in Firefox and hover over an img element scrollbars pop up and suddenly I can scroll through the entire document (left, right, up and down). I feel like this is a Firefox issue since I only encounter this issue there and not in any other browsers.
You can find the website here nadiasportfolio.tumblr.com
$(document).ready(function() {
$("#NEW").delay(250).fadeIn(1000);
$("#MEDIA").delay(850).fadeIn(1000);
$("#NEWB").delay(1600).fadeIn(1000);
// $(".thumbnail").each(function(i){
// $(this).attr("id", "thumbnail" + i);
// });
$(".content").each(function(i) {
$(this).attr("id", "content" + i);
});
$(".thumbnail").addClass("color-hover");
$(".pdf").addClass("color-hover");
$(".content > img").addClass("color-hover");
$(".content").hide();
$("#toggleHeader").html("");
setTimeout(function() {
$("header").trigger('click');
}, 3000);
$("header").on("click", headerScrollUp);
$("header a").click(function(evt) {
evt.stopPropagation();
});
$("#toggleHeader").on("click", headerScrollDown);
$(".thumbnail").on("click", toggleContent);
$(".pdf").on("click", changeSizePDF);
});
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$(window).on("resize", function(event) {
// "if (x !== undefined){}" -> does not scroll back to horizontal 0
// but is all over the place
// if (x !== undefined) {
scrollToCurrent = ($(window).width() * 1.015 * x - $(window).width());
$("section").animate({
scrollLeft: scrollToCurrent
}, 10);
$(".pdf").children("img").css("height", "8vh").css("width", "auto").css("cursor", "zoom-in");
// }
});
var x;
var scrollToCurrent;
function headerScrollUp() {
$("header").animate({
height: "0vh"
}, 1000);
$("#toggleHeader").html("≡");
}
function headerScrollDown() {
$("header").animate({
height: "100vh"
}, 1000);
$("#toggleHeader").html("");
}
function toggleContent() {
if ($(this).next(".content").is(":hidden") === true) {
x = $(this).parent().index() + 1;
// scrollToCurrent = ($(window).width() * 1.0 * x - $(window).width());
console.log(this);
scrollToCurrent = (($(this).width() + 8) * x - ($(this).width() + 8));
$("section").animate({
scrollLeft: scrollToCurrent
}, 500);
$(this).delay(500).next(".content").show();
$(this).parent().siblings().css("opacity", "0");
$("section").css("overflow-x", "hidden");
$("section").css("overflow-y", "initial");
$("section").animate({
scrollTop: viewportHeight / 2 + "px"
}, 500);
$(".toggleText").css("transform", "scaleY(-1)");
// $(".toggleText").animate({transform: "rotate(90deg)"}, 500);
} else {
//animatie werkt niet ??
$(".toggleText").css("transform", "scaleY(1)");
$("section").animate({
scrollTop: "-=1000px"
}, 100);
$(this).delay(100).next(".content").hide();
$(this).parent().siblings().css("opacity", "100");
$("section").css("overflow-x", "initial");
$("section").css("overflow-y", "hidden");
}
}
function changeSizePDF() {
if ($(this).children("img").height() < viewportHeight / 9) {
var heightBig = $(this).children("img").height() * 9;
var widthBig = $(this).children("img").width() * 9;
$(this).children("img").animate({
height: heightBig,
width: widthBig
});
$(this).css("cursor", "zoom-out");
} else {
var heightSmall = $(this).children("img").height() / 9;
var widthSmall = $(this).children("img").width() / 9;
// var ratioToSmall = (viewportHeight / 100 * 8) * $(this).children("img").width() / $(this).children("img").height();
$(this).children("img").animate({
height: heightSmall,
width: widthSmall
});
$(this).css("cursor", "zoom-in");
}
}
.iframe-controls-container,
.iframe-controls-container--logged-in,
.tmblr-iframe,
.tmblr-iframe--desktop-logged-in-controls,
.iframe-controls--desktop {
display: none;
}
* {
margin: 0;
padding: 0;
font-weight: normal;
}
.color-hover {
filter: grayscale(255);
-webkit-filter: grayscale(255);
}
.color-hover:hover {
filter: grayscale(0);
-webkit-filter: grayscale(0);
}
body {
color: white;
background-color: black;
font-family: helvetica;
}
h1 {
font-size: 4vw;
}
h2,
nav a {
font-size: 2.5vw;
margin: auto;
}
h3 {
font-size: 1.5vw;
margin: auto;
}
p {
font-size: 1em;
}
code {
font-family: monospace;
background-color: lightgray;
color: rgba(0, 0, 0, 0.9);
}
::-webkit-scrollbar {
width: 4px;
/* change scrollbar space */
height: 4px;
background: black;
/* optional: just make scrollbar invisible */
}
/* optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: linear-gradient(to bottom right, #ff00bf, #ff00e9, #b600ff, #9000ff, #3f00ff, #0d00c9);
}
#posts {
display: none;
}
header {
background-color: #ddddff;
height: 100vh;
width: 100vw;
text-align: center;
-webkit-overflow: auto;
overflow: auto;
position: fixed;
z-index: 1;
}
header h1 {
margin-top: 40vh;
}
a {
color: white;
text-transform: uppercase;
}
nav {
position: absolute;
bottom: 1vh;
width: 100vw;
}
nav a {
margin-left: 2vw;
margin-right: 2vw;
cursor: pointer;
}
section {
height: 98vh;
white-space: nowrap;
-webkit-overflow-x: scroll;
-webkit-overflow-y: hidden;
overflow-x: scroll;
overflow-y: hidden;
}
#toggleHeader {
width: 100vw;
background: #ddddff;
opacity: 0.9;
text-align: center;
height: 2vh;
cursor: pointer;
}
article {
/* background-color: darkgray;*/
width: 100vw;
height: 99vh;
display: inline-block;
/*
border-top: 5px solid black;
border-left: 2px solid black;
border-right: 2px solid black;
*/
text-align: center;
}
.thumbnail {
padding: 2%;
width: 100vw;
height: 99vh;
background: radial-gradient(skyblue, midnightblue);
/* background-size: cover;*/
background-size: 50vh;
background-position: center;
background-color: white;
-webkit-overflow-y: hidden;
overflow-y: hidden;
border: 4px solid black;
}
#tn-window-of-sounds {
background-image: url("http://static.tumblr.com/6zouj6x/RyIom7lgk/window_of_sounds_logo.svg");
background-size: 50vh;
/* background-repeat: no-repeat;*/
}
#tn-lets-make {
background-image: url("https://68.media.tumblr.com/dcb2c0ecd7663664d00208b793aeec93/tumblr_ome08qJX761w34hfho3_r1_1280.png");
}
#tn-jumbo {
background-image: url("https://68.media.tumblr.com/1baf77332e4ae9873da8dbf483870f5e/tumblr_omnx7cJ38U1w34hfho2_r1_540.png");
}
#tn-do {
/*gif:*/
/* background-image: url("https://media.giphy.com/media/26FmRuwDb5eFOPDZS/source.gif");*/
/* still image:*/
background-image: url("https://68.media.tumblr.com/4a4f6f8f43e3a3d8ab6ef29967d47491/tumblr_omnu22CYIt1w34hfho1_1280.png");
}
#tn-van-gogh {
background-image: url("https://68.media.tumblr.com/fe28945f60e1d27d89b03f79661b7f1a/tumblr_omo650hbbp1w34hfho1_1280.png");
}
#tn-data-visualisation {
background-image: url("http://static.tumblr.com/6zouj6x/Yonomo9jy/ballonnen_met_mens.svg");
}
#tn-nature-tour {
background-image: url("https://68.media.tumblr.com/7e0c4cc06b662fca87201399ad134d64/tumblr_omocqygQIu1w34hfho1_1280.png");
}
#tn-insect-stamps {
background-image: url("https://68.media.tumblr.com/3c3d875629cd2ced500c9c59c288ca61/tumblr_omt5hkNls91w34hfho9_1280.jpg");
}
.textWrapper {
width: 40vw;
padding: 1vw;
margin: auto;
margin-top: 40vh;
background-color: rgba(0, 0, 0, 1);
cursor: pointer;
}
.textWrapper:hover {
font-family: monospace;
font-weight: thin;
}
.thumbnail h2 {
text-transform: uppercase;
}
.toggleText {
background: url("https://d30y9cdsu7xlg0.cloudfront.net/png/615573-200.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
height: 7.5vw;
width: 7.5vw;
margin: auto;
margin-top: 30vh;
/* z-index: -1;*/
cursor: pointer;
}
.content {
padding-top: 5vh;
padding-bottom: 1vh;
display: none;
width: 90vw;
min-height: 500px;
position: sticky;
left: 0;
}
.content p,
.content code {
white-space: normal;
text-align: left;
}
.content p {
padding: 5vw;
padding-top: 1vh;
padding-bottom: 1vh;
}
.content>img {
max-height: 90vh;
max-width: 90vw;
visibility: visible;
}
.background-color-white {
background-color: white;
}
.pdf {
background-color: black;
-webkit-overflow: scroll;
overflow: scroll;
width: 100vw;
text-align: left;
cursor: zoom-in;
}
.pdf img {
height: 10vh;
width: auto;
}
embed {
width: 100vw;
}
.embed-code {
background-color: lightgray;
height: 40vh;
margin: 0;
}
video {
background-color: gray;
max-height: 100vh;
max-width: 100vw;
}
footer {
background-color: blue;
}
/*{CustomCSS}*/
<!DOCTYPE html>
<html>
<head>
<title>Nadias portfolio.</title>
<!-- <link rel="shortcut icon" href="{Favicon}">-->
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="keywords" content="portfolio, Nadia, van, Leur, CMD, communication, &, and, multimedia, design, jquery, student, javascript, html, css">
<meta name="author" content="Nadia van Leur">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--
{block:Description}
<meta name="description" content="{MetaDescription}" />
{/block:Description}
-->
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="index.js"></script>
</head>
<body>
<header>
<h1>Nadias portfolio.</h1>
<nav>
Resume
Nederlands
</nav>
</header>
<div id="toggleHeader" class="color-hover">
≡
</div>
<section>
<!--Window of Sounds app -->
<article>
<div class="thumbnail" id="tn-window-of-sounds">
<div class="textWrapper">
<h2>Window of Sounds</h2>
<h3>Think further than the frame.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content1">
<p>Window of Sounds is an app created for Het Noordbrabants Museum. A museum about the art history of Noord-Brabant.<br></p><br>
<img src="foto mensen koptelefoon"><br>
<img src="foto mensen koptelefoon"><br>
<img src="foto mensen koptelefoon"><br>
<embed class="embed-code" src="http://static.tumblr.com/6zouj6x/nSiomo27n/index.js.txt">
</div>
</article>
<!-- Visuele identiteit Let's Make -->
<article>
<div class="thumbnail" id="tn-lets-make">
<div class="textWrapper">
<h2>Let's Make</h2>
<h3>Visual Identity.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content2">
<p>Test tekst2</p><br>
<img src="https://68.media.tumblr.com/23c916b7cf86e27103acee1e21bc6938/tumblr_ome08qJX761w34hfho1_1280.png">
<img src="https://68.media.tumblr.com/30c0e288a6e406d54792441f9c498c75/tumblr_ome08qJX761w34hfho2_1280.png">
</div>
</article>
<!--Jumbo shopping app -->
<article>
<div class="thumbnail" id="tn-jumbo">
<div class="textWrapper">
<h2>Shopping app design</h2>
<h3>Jumbo supermarket.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content3">
<p>Test tekst3</p><br>
<div class="pdf">
<img src="https://68.media.tumblr.com/1baf77332e4ae9873da8dbf483870f5e/tumblr_omnx7cJ38U1w34hfho2_r1_1280.png">
<img src="https://68.media.tumblr.com/07340d2e8a0fa3279d19685c5d2efe2a/tumblr_omo0gfTM8I1w34hfho9_1280.png">
<img src="https://68.media.tumblr.com/589f872342e4900461e3feb9779d0276/tumblr_omnx7cJ38U1w34hfho1_1280.png">
<img src="https://68.media.tumblr.com/71d4d216751e80c4ff59cb16be2f8676/tumblr_omo0gfTM8I1w34hfho8_1280.png">
<img src="https://68.media.tumblr.com/5b9968c37295813a3321dc5c965e6c96/tumblr_omo0gfTM8I1w34hfho10_1280.png">
<img src="https://68.media.tumblr.com/ea1523e56ac76ae2b2bc35ab5a035823/tumblr_omo0gfTM8I1w34hfho7_1280.png">
<img src="https://68.media.tumblr.com/aa814e094d3aeead9106393b7a644d05/tumblr_omo0gfTM8I1w34hfho6_1280.png">
<img src="https://68.media.tumblr.com/02add0021cf9bae65d227056e133b45e/tumblr_omo0gfTM8I1w34hfho2_1280.png">
<img src="https://68.media.tumblr.com/1eea370bdf68eabeec685f4609b8660d/tumblr_omo0gfTM8I1w34hfho3_1280.png">
<img src="https://68.media.tumblr.com/65b545b972450f03be3aed4f91fb58ba/tumblr_omo0gfTM8I1w34hfho5_1280.png">
<img src="https://68.media.tumblr.com/8eaaa91a977d9d9f083375f9c25b296d/tumblr_omo0gfTM8I1w34hfho4_1280.png">
<img src="https://68.media.tumblr.com/4452fecce1b47f3eb3785c4634154f71/tumblr_omo0gfTM8I1w34hfho1_1280.png">
</div>
<div class="pdf">
<!-- wireframes-->
<img src="https://68.media.tumblr.com/bd85af7bc33d967c3bc1d2c3a652cb0c/tumblr_omob6m2joz1w34hfho2_1280.png">
<img src="https://68.media.tumblr.com/99379cfa879f8933b324dc19ec1eff40/tumblr_omob6m2joz1w34hfho4_1280.png">
<img src="https://68.media.tumblr.com/b93a861e995036681bca011466728e12/tumblr_omob6m2joz1w34hfho1_1280.png">
<img src="https://68.media.tumblr.com/b65291e59aafa734d45e71afe6577471/tumblr_omob6m2joz1w34hfho3_1280.png">
</div>
<div class="pdf">
<!-- flowchart-->
<img src="https://68.media.tumblr.com/5cf04fbf473771e3ad12bc35c37ef9df/tumblr_omoa1vsBJz1w34hfho1_1280.png" class="background-color-white">
</div>
</div>
</article>
<!--Do - to do list -->
<article>
<div class="thumbnail" id="tn-do">
<div class="textWrapper">
<h2>Do</h2>
<h3>Your interactive planning buddy.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content4">
<p>Test tekst3</p><br>
<video controls>
<source src="https://nadiasportfolio1.tumblr.com/video_file/t:iXG2gnAz8wfzNTNiBot6bQ/158063052645/tumblr_ome2pg5G361w34hfh/480" type="video/mp4">
</video><br>
<embed class="embed-code" src="http://static.tumblr.com/6zouj6x/u8xomeeab/code_week_7.5.txt">
</div>
</article>
<!--Van Gogh museum concept -->
<article>
<div class="thumbnail" id="tn-van-gogh">
<div class="textWrapper">
<h2>Vincent van Gogh</h2>
<h3>Museum concept.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content5">
<p>Test tekst3</p><br>
<img src="https://68.media.tumblr.com/fe28945f60e1d27d89b03f79661b7f1a/tumblr_omo650hbbp1w34hfho1_1280.png"><br>
<img src="https://68.media.tumblr.com/35adcb40d7794ff87a24f6c1137dea18/tumblr_omo650hbbp1w34hfho3_r1_1280.png"><br>
<img src="https://68.media.tumblr.com/1aefc3bee07b76fbc2a77e42ea21987c/tumblr_omo650hbbp1w34hfho2_r1_1280.png">
</div>
</article>
<!--Festival data visualisation -->
<article>
<div class="thumbnail" id="tn-data-visualisation">
<div class="textWrapper">
<h2>Festival fun</h2>
<h3>Data visualisation.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content6">
<p>Test tekst3</p><br>
<img src="http://static.tumblr.com/6zouj6x/ZMgomo9ik/ballonnen.svg"> <br>
<img src="http://static.tumblr.com/6zouj6x/Yonomo9jy/ballonnen_met_mens.svg">
</div>
</article>
<!--nature tour concept -->
<article>
<div class="thumbnail" id="tn-nature-tour">
<div class="textWrapper">
<h2>Nature tour</h2>
<h3>Hybrid reality studying.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content7">
<p>Test tekst3</p><br>
<img src="https://68.media.tumblr.com/7e0c4cc06b662fca87201399ad134d64/tumblr_omocqygQIu1w34hfho1_1280.png"> <br>
<img src="https://68.media.tumblr.com/696f84dadfdbe32a27e465cc32587644/tumblr_omocqygQIu1w34hfho2_1280.png">
</div>
</article>
<!-- Insect stamps -->
<article>
<div class="thumbnail" id="tn-insect-stamps">
<div class="textWrapper">
<h2>Insect stamps</h2>
<h3>Print design.</h3>
</div>
<div class="toggleText"></div>
</div>
<div class="content" id="content8">
<p>Test tekst3</p><br>
<div class="pdf">
<img src="https://68.media.tumblr.com/41d9fb6e284ba7f2b3250c3ab6df237f/tumblr_omt5bdemab1w34hfho1_1280.png">
<img src="https://68.media.tumblr.com/d1353684775c941d446f27cbbcbe2e20/tumblr_omt5bdemab1w34hfho2_1280.jpg">
<img src="https://68.media.tumblr.com/5a7049422a210bfd6662cca2715dec61/tumblr_omt5bdemab1w34hfho3_1280.png">
<img src="https://68.media.tumblr.com/f907bae2cb23340dac25a7fcee2086b7/tumblr_omt5bdemab1w34hfho4_1280.jpg">
<img src="https://68.media.tumblr.com/08c51ac81196e4cf97f07d440b187f97/tumblr_omt5bdemab1w34hfho5_1280.jpg">
<img src="https://68.media.tumblr.com/b723a80f40b6a47b1685cbb211ceffe5/tumblr_omt5bdemab1w34hfho7_1280.png">
<img src="https://68.media.tumblr.com/13e4fecf712f10b17456c13a9f60f9f9/tumblr_omt5bdemab1w34hfho6_1280.png">
<img src="https://68.media.tumblr.com/65c627320107a02f7d611b1cec67cea6/tumblr_omt5bdemab1w34hfho8_1280.png">
<img src="https://68.media.tumblr.com/47785b763eafda7a6efa7debaaf03d06/tumblr_omt5bdemab1w34hfho10_1280.png">
<img src="https://68.media.tumblr.com/a2770b062c2b80146c4101fb85d03194/tumblr_omt5bdemab1w34hfho9_1280.png">
<img src="https://68.media.tumblr.com/53c925ddb870b2e548e8a542799a2a54/tumblr_omt5hkNls91w34hfho1_1280.jpg">
<img src="https://68.media.tumblr.com/182f16489d01d846c55c3a9022b52ddb/tumblr_omt5hkNls91w34hfho2_1280.png">
<img src="https://68.media.tumblr.com/a63baa1ad66ed76657b0a440bc072c18/tumblr_omt5hkNls91w34hfho3_1280.png">
<img src="https://68.media.tumblr.com/18574a0a546a587c946b8d1fbd057acb/tumblr_omt5hkNls91w34hfho4_1280.jpg">
<img src="https://68.media.tumblr.com/1c11c92fdd5d594a10b036eb7e8bac48/tumblr_omt5hkNls91w34hfho5_1280.jpg">
<img src="https://68.media.tumblr.com/c2b54fedf1b2903071aca31beba48dbb/tumblr_omt5hkNls91w34hfho6_1280.png">
<img src="https://68.media.tumblr.com/2f138adcce9e7b9f884797a5e368863d/tumblr_omt5hkNls91w34hfho7_1280.png">
<img src="https://68.media.tumblr.com/80a6230cd93c50508bd99bdc9902eaeb/tumblr_omt5hkNls91w34hfho8_1280.jpg">
<img src="https://68.media.tumblr.com/3c3d875629cd2ced500c9c59c288ca61/tumblr_omt5hkNls91w34hfho9_1280.jpg">
</div>
</div>
</article>
</section>
<footer>
</footer>
</body>
</html>