0

Animations Problem:

Chrome & Firefox works
IE9-11: Animations works not correctly :/

myArray contains the buildings ID and shuffle is only for randomize the sort

 var skyline = Snap.select("#skylines");
 var bottles = [
        "Flasche1",
        "Flasche2",
        "Flasche3",
        "Flasche4"
    ];

 $("#drink").click(function () {
        hideBuildings(allBuildings);
        startBuildings(bottles);
        $('.main').moveTo(3); //Onepage Scroll
    });


 function hideBuildings(myArray) {
        for (var i = 0; i < myArray.length; i = i + 1) {
            $('#' + myArray[i]).css({opacity: 0 });
            slideDown(myArray[i]);

        }
    }
/*
 * Slide Down
 */
function slideDown(el) {
    var cuel = skyline.select("#" + el);
//the height of a building
    var a = cuel.getBBox().height;
    cuel.animate({
        transform: "t0, t" + a
    }, 600);

}



function startBuildings(myArray) {
        var myArray = shuffleArray(myArray);
        for (var i = 0; i < myArray.length; i = i + 1) {
            $('#' + myArray[i]).css({opacity: 1});
            slideUp(myArray[i], 0, randomFromInterval(1470, 2000));
        }
    }

//Slide Up
function slideUp(el, y, duration) {
        var cuel = skyline.select("#" + el);
        cuel.animate({
            transform: "t0, t" + -y,
            opacity: 1

        }, duration, mina.bounce);


    }

SVG Problem:

SVG looks correct in Firefox and Chrome but not in IE11 i want 100% width but is not working in IE9-11

SVG Open tag:

<svg id="skylines"  version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="703px"
preserveAspectRatio="xMinYMin"  height="123.365px" viewBox="0 0 703 123.365" enable-background="new 0 0 703 123.365" xml:space="preserve">

CSS:

.skyline-wrapper svg {
  height: 100%;
  width: 100%;
  display: block;
}

I can not accurately describe both problems because I have no idea where they come from

Link http://swisslayer.ch/drink/splash.html click on "JA" thx greetings from Switzerland

Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265
cannap
  • 118
  • 3
  • 7
  • try add this rule .skyline-wrapper{width:100%;} because I don't find styles for this element and change this .skyline-wrapper svg{height: auto;} – mcmac Jan 06 '14 at 14:29
  • thx but same result ;/ – cannap Jan 06 '14 at 14:36
  • for a test create new empty html file and put only svg code plus this style: html,body,svg{width:100%; height:100%;} *{margin:0; padding:0;} and check this on IE – mcmac Jan 06 '14 at 14:41
  • ohh this works http://swisslayer.ch/drink/svg.html – cannap Jan 06 '14 at 14:58
  • ok perfect so now try add another style and code from you first version. JS add at last ok first only html and css and check results – mcmac Jan 06 '14 at 15:03
  • ok so add to this div this styles: .divsvg{display:block; width:100%; height:auto; max-height:600px;} and write me message, you can try use fix height example 400px. – mcmac Jan 06 '14 at 15:22
  • I have now:
    result:http://swisslayer.ch/drink/svg.html 100% width in IE11     – cannap Jan 06 '14 at 15:34
  • ah and here your example http://swisslayer.ch/drink/svg2.html – cannap Jan 06 '14 at 15:37
  • ok I used this style and look ok bottom: -150px; display: block; height: 332px; max-height: 600px; position: fixed; width: 100%; } but bottom and height is not fixed you can write function in jquery to check how is current height svg element and add this height to div and set margin bottom. – mcmac Jan 06 '14 at 15:43
  • I show you how you can do this for your example but give me a time. – mcmac Jan 06 '14 at 15:45
  • hi i will check http://stickyjs.com/ this but i need to go very very thank your for help! I hope one day makes the IE like the others:D I'm back tomorrow because I write here if I did not it come out; D – cannap Jan 06 '14 at 15:48
  • i have tried but without success Link: http://swisslayer.ch/test2/ `/* Sticky Footer ================================================== */ setHeight('#footer'); $(window).resize(function () { setHeight('#footer'); }); function setHeight(element) { //Height in IE need to 100% for fullwidth dont know why.. ? var currentHeight = $(element).height(); $(element).css({ height: currentHeight }); } ` CSS: – cannap Jan 07 '14 at 12:50
  • try use this script: $(window).on("load resize",function(e){ var height = $("#skylines").outerHeight(true); $("#footer").css("height", height); }); – mcmac Jan 07 '14 at 22:25
  • Hi, nothing ;/ http://swisslayer.ch/test2/ on resize the #footer goes up and in IE shows only the Half svg really do not know what I should do this **** IE – cannap Jan 08 '14 at 11:43
  • ok if this is not important I can help you in weekend ok, but I must contact with you. – mcmac Jan 08 '14 at 13:06
  • im online in irc.freenode.net as "cannap" all day :D i try some other things thank you :D i will writte my experience – cannap Jan 08 '14 at 13:37
  • possible duplicate of [Cross-platform SVG rotation animation:](http://stackoverflow.com/questions/21093244/cross-platform-svg-rotation-animation) – Paul Sweatte Mar 01 '14 at 00:28

1 Answers1

0

The difference between the 100% cross-browser rendering is xml:space. Unfortunately:

The xml:space attribute is not supported in SVG.

Use a beautifier or XSLTProcessor to normalize the whitespace.

References

Community
  • 1
  • 1
Paul Sweatte
  • 24,148
  • 7
  • 127
  • 265