Paul Paul - 19 days ago 6
CSS Question

Chrome not displaying iframe and/or transition properly

I have a little project that works fine in safari and firefox, but not in chrome. It's one of my first projects developing for the web so still very fresh. I have made a couple of gifs that will save me a lot of explaining.

This is working properly in safari:

enter image description here

But this is what happens in chrome:

enter image description here

So this is not working as intended. My first thought was that it could be an issue with iframe and chrome, but the files are running on a local server so as far as I understand, it shouldn't be an issue. The text is not being pushed down, so that is confusing to me as it indicates that the css is not being interpreted properly? As I said, I am still new to this and this is the first time I test a project in different browsers so not sure how specific to my project this issue could be. Any help much appreciated. P

Here is the full code needed in order to reproduce the problem. Please keep in mind that chrome won't properly play the iframe unless you run a local server. It's up to you if you want to do that. The layout problem that I am getting is not related to the iframe playing or not.

html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test for S.O.</title>
<link rel="stylesheet" type="text/css" href="forStack.css">
</head>
<body>
<div id="container">

<div id="backgroundLeft"><img id='backgroundLeftImage' src="image1.jpg" width="100%" height="100%"></div>

<div id="wrap">

<p>Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his. Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.<span id="linkID" class="link"> click me </span>.<span><iframe id="frame" class="rect" scrolling="no" marginwidth=0 marginheight=0></iframe>
</span> Lorem ipsum dolor sit amet, ut eos alterum perpetua reformidans, odio possim in qui, et nam ferri disputationi. Pro an eius legimus volutpat, ius facilisi gubergren ei, modus inimicus ut his. Pro ei eirmod quaerendum, cu quo epicuri lucilius euripidis. Nam facer simul ut, aeterno persecuti ea vix, ius at alienum officiis perfecto.
Dicta senserit dissentiunt quo ea. Ne possim lobortis percipitur his.
Viderer appetere ea quo, has ne causae probatus, eum ea dissentiunt philosophia. Menandri imperdiet dissentiet per ad. Ea cibo tollit ius, mel id mundi vituperata.
</p>
</div>
<div id="backgroundRight"><img id='backgroundRightImage' src="image2.jpg" width="100%" height="100%"></div>

<script type="text/javascript" src="jquery.js"></script>
<script src="scriptStack.js"></script>
</body>
</html>


css

html, body {
min-height: 100;
margin: 0px;
}

p span iframe {
position: relative;
left: 50%;
transform: translateX(-50%);

}

#backgroundLeft{
position: fixed;
float: left;
width: 30%;
min-height: 100%;
overflow: hidden;
}

#backgroundLeftImage {
position: absolute;
}

#backgroundRightImage{
position: absolute;
}

#wrap{
position: absolute;
left: 50%;
transform: translate(-50%, 0);
margin: 100px auto;
width: 20%;
}

#backgroundRight{
position: fixed;
left: 70%;
width: 30%;
min-height: 100%;
overflow: hidden;
}

p{
line-height: 2em;
vertical-align: top;
position: relative;
}

.videos {width: 100%;}

.link {
color: #d6820e;
cursor: pointer;
}

.link:hover {
color: #d6460e;
}

iframe {
border:0 none;
}

.rect{
float: left;
height: 0px;
width: 100%;
display: block;
margin: 0px;
padding: 0px;
opacity: 0;

transition-property: all;
transition-duration: 2s;
transition-timing-function: ease-in-out;
}

.open {
height: 11.4vw;
width: 100%;
opacity: 1;
display: inline-block;
}


js

$(document).ready(function(){

var player;
var frame = $("#frame");

frame.bind("load", function () {
player = $(this).contents().find("#testVid");
player.on('ended', function () {
frame.removeClass("open");
});
});

$("#linkID").click(function(){

if (frame.hasClass("open")) {

frame.removeClass("open");
frame.contents().find('#testVid').get(0).pause();

} else {

frame.attr("src","iframe.html");
document.getElementById('frame').onload = function() {
frame.addClass("open");
frame.contents().find('#testVid').get(0).play();
}
}
});
});


iframe.html

<!DOCTYPE html>
<html>
<head>
<title></title>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript" src="script2.js"></script>

<link rel="stylesheet" type="text/css" href="styles.css">

</head>
<body>


<video id="testVid" width="100%">
<source src="mickey.mp4" type="video/mp4">
</video>



</body>
</html>


-------------------------------------------------------------EDIT----------------------------------------------------------------

I have, removed the "left" property form the ".rect" class and added display: inline and that has resolved the chrome display problem but now there are weird gaps all through my text, like so:

enter image description here

And I have made sure padding and margin are zero to every possible element, class or id on the page!

Answer

I believe some of the problems you are having are due to mixing display: block; and display: inline-block; for the same element.

Removing the float property from .rect, and the display property from .open results in the following, which seems to be working as intended with no other changes.

.rect{
    height: 0px;
    width: 100%;
    display: block;
    margin: 0px;
    padding: 0px;
    opacity: 0;

    transition-property: all;
    transition-duration: 2s;
    transition-timing-function: ease-in-out;
}

.open {
    height: 11.4vw;
    width: 100%;
    opacity: 1;
}