CSS keeping image ratio, not working with Chrome

Question

So the main idea is to keep this black image in the top left corner (with a ratio 16:9) and fill the remaining space with a "tomato" div. the solution I had found works fine on FF and even IE but breaks under Chrome and Opera (webkit). I'm not entirely sure what do I need to change..

Here's a link to jsfiddle (it doesn't work there well, so I'm adding the whole code below as well).

    <!DOCTYPE html>
<html lang="en">
  <head>
    <style>
.body{ margin: 0px; }
.container {
  position: fixed;
  height: 100%;
  width: 100%;}

.imgHor {width:100%; display:block;}
.moreSpaceHor {width: 100%;}
.lessSpaceHor {
  background: tomato;
  height: 100%;}

.imgVer { height: 100%; }
.moreSpaceVer {display: inline; float:top;}
.lessSpaceVer {
  #top: 100%;
  width: 100%;
  float:top;
  height:100%;
  display: inline; 
  background: tomato;
  position:absolute;
}

</style>
<script>
var timeout=-1;

function manageResizing(){
  window.clearTimeout(timeout);
  timeout=setTimeout(resizeView,128);
}

function resizeView(){
  var img=document.getElementById("imgResizer");

  var typeOrient = (9*window.innerWidth > 16*window.innerHeight);
  var typeClass  = img.className =="imgVer"; 
  //if class and orientation are the same -> quit
  if(typeOrient == typeClass) return;

  var mSpace=document.getElementById("moreSpace");
  var lSpace=document.getElementById("lessSpace");

  img.className  = typeClass ? "imgHor" : "imgVer";
  lSpace.className = typeClass ? "lessSpaceHor" : "lessSpaceVer";
  mSpace.className = typeClass ? "moreSpaceHor" : "moreSpaceVer";

}
</script>
  </head>
  <body class="body" onload="manageResizing();" onresize="manageResizing();">
    <div class="container">
        <div id="moreSpace" class="moreSpaceHor">
            <div style="position:fixed; top:0px; color:white;">PIOTR</div>
            <img class="imgHor" id="imgResizer" src="http://oi62.tinypic.com/j9vsj7.jpg"></img>
        </div>
        <div id="lessSpace" class="lessSpaceHor">KOZAK</div>
    </div>
  </body>
</html>

//edit Some more info, it kind of work on Chrome/Opera, it breaks when you try to resize horizontally.. although when you refresh the window it's back as it should be :/

Side note: Remember that Chrome is now running the [Blink](https://en.wikipedia.org/wiki/Blink_%28layout_engine%29) layout engine. While it is a recent fork of WebKit and hence shares a lot of code still with WebKit, Blink is not WebKit. — ajp15243, Apr 11 '14 at 15:13
Looks like it works fine for me in Chrome Version 35.0.1916.27 beta-m. At least the black area does; the facebook image specified in `#imgResizer` does not load. — baacke, Apr 11 '14 at 15:31
yeah, the black one is fine, the "tomato" one disappears when it's meant to appear on the right side of the image PS I've changed the url to the image 1. How to replicate the issue: a) minimize window to a long horizontal bar shape, then maximize it (hopefully black is at the top and tomato at the bottom) then minimize it back to the previous shape and black is on the left but the tomato is gone.. if your refresh the page it all looks alright then :/ — Pete Kozak, Apr 11 '14 at 15:37
Andrei I have exactly the same version.. so what happens when you resize your browser only from left to right? Does the "tomato" fill the space either at the bottom or at the top depending on the resolution? I'm going to restart my machine and clear the cache. PS it does work fine on jsfiddle, it break when you recreate your own html file :/ — Pete Kozak, Apr 11 '14 at 15:48
The black box is at the top and the red "tomato" is at the bottom always no matter how I twist it. I tested on jsFiddle though, but if it works there it should work in your code too. Make sure you are calling the javascript after the document loads. — Andrei, Apr 11 '14 at 15:53

score 0 · Answer 1 · answered Apr 11 '14 at 15:55

0

I get an output similar to yours by calling the javascript outside of an onReady() block. Make sure the javascript is called after the document has loaded.

answered Apr 11 '14 at 15:55

Andrei

3,015
2
16
24

Not entirely sure what you mean. I call "manageResizing" function twice, once when the HTML is loaded (this works fine) and the second time after resizing.. this doesn't happen directly but through the timeout so after 512ms it should all be loaded and ready, hence displayed correctly but it isn't. – Pete Kozak Apr 11 '14 at 16:04
I mean that in jsFiddle, the javascript is called after the document is fully loaded. If you look in the left side, you can see *Frameworks & Extensions*, in the second combo-box you can chenge when you javascript "loads". Change it to one of the last 2 and tell me if the results are similar to what you are getting. – Andrei Apr 11 '14 at 16:18
It's a tricky one. So the problem with jsfiddle is that it doesn't change classes (as it should) when the window is being resized. So when I set the first combo-box to either "onLoad" or "onDomReady" the first scenario looks correct, if set to the remaining two - then it breaks (the white space appears on the right). I believe that the issue in jsfiddle comes from the same origin as the one I have - because it gives the same output - some sort of problem with loading.. like in the incorrect order. – Pete Kozak Apr 11 '14 at 16:27
I see it strange too and don't know why it is happening, but you could probably add your code in an `$( document ).ready()` and emulate what jsFiddle is doing on the first 2 from the combo-box. Search the internet for the non-jQuery alternative if you are not using jQuery. – Andrei Apr 11 '14 at 16:33
So Andrei, stepping away from jsfiddle, onload works perfectly fine. The issue happens onresize - things seems to be loaded in a different order in different browsers. Trying to play with an order when is what loaded.. but no luck yet. Weirdly enough it only happens for the "vertical" state, but when you refresh the page while in this certain window shape - it loads CSS and all of this correctly.. just breaks after resizing :/ – Pete Kozak Apr 11 '14 at 16:50
Ok, so i just noticed that the jsFiddle is broken. Check the console. No javascript running there on resize. – Andrei Apr 11 '14 at 17:34
Anyone else any thoughts? For testing purposes please copy the attached code rather than using jsfiddle cause as we established it doesn't perfectly copy the required logic. Cheers. – Pete Kozak Apr 14 '14 at 10:23

score 0 · Accepted Answer · edited May 23 '17 at 12:27

0

Ok it's been solved now, I followed the idea here about attaching a new method responsible for making Chrome to redraw the page: Force DOM redraw/refresh on Chrome/Mac

var forceRedraw = function(element){...}

Now it's fine among all browsers.

edited May 23 '17 at 12:27

Community

1
1

answered Apr 14 '14 at 10:46

Pete Kozak

442
3
20

CSS keeping image ratio, not working with Chrome

2 Answers2