{"action":"created","issue":{"url":"https://api.github.com/repos/philipwalton/flexbugs/issues/29","labels_url":"https://api.github.com/repos/philipwalton/flexbugs/issues/29/labels{/name}","comments_url":"https://api.github.com/repos/philipwalton/flexbugs/issues/29/comments","events_url":"https://api.github.com/repos/philipwalton/flexbugs/issues/29/events","html_url":"https://github.com/philipwalton/flexbugs/issues/29","id":64654885,"number":29,"title":"Problem with animated sprites in flexbox","user":{"login":"BlackMagic","id":333647,"avatar_url":"https://avatars.githubusercontent.com/u/333647?v=3","gravatar_id":"","url":"https://api.github.com/users/BlackMagic","html_url":"https://github.com/BlackMagic","followers_url":"https://api.github.com/users/BlackMagic/followers","following_url":"https://api.github.com/users/BlackMagic/following{/other_user}","gists_url":"https://api.github.com/users/BlackMagic/gists{/gist_id}","starred_url":"https://api.github.com/users/BlackMagic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BlackMagic/subscriptions","organizations_url":"https://api.github.com/users/BlackMagic/orgs","repos_url":"https://api.github.com/users/BlackMagic/repos","events_url":"https://api.github.com/users/BlackMagic/events{/privacy}","received_events_url":"https://api.github.com/users/BlackMagic/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-03-26T23:21:51Z","updated_at":"2015-03-27T11:13:48Z","closed_at":null,"body":"I'm developing a website using flexbox and want to use animated sprites on it. Flexbox doesn't like animated sprites and they throw flexbox's calculations out dramatically. There are two websites where the code is demonstrated: ieee-qld.org/flex-bad and ieee-qld.org/flex-good. On the first site the graphic is 50% bigger than it should be. \r\n\r\nIn the code below I've commented out the flexbox enabling code. Removing the comments causes the animated sprite to misbehave.\r\n\r\n    <!doctype html>\r\n    <html>\r\n    <head>\r\n    <meta charset=\"UTF-8\" />\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\" />\r\n    <title>flex problem</title>\r\n    </head>\r\n    <body>\r\n    <style>\r\n    * {margin:0; padding:0; border:0; outline:0; vertical-align:baseline; background:transparent;}\r\n    body {line-height:1.5; font-size:75%; color:#222; background:#b6d3e4; font-family:\"Helvetica Neue\", Arial, Helvetica, sans-serif;}\r\n    .sprite {width:150px; height:130px; border-width: 5px; border-style:solid; border-color:#ffffff; border-radius:5px; background-image:url(\"sprite.jpg\");\r\n        -webkit-animation: play 32s steps(4) infinite;\r\n        -ms-animation: play 32s steps(4) infinite;\r\n        animation: play 32s steps(4) infinite;}\r\n    @-webkit-keyframes play{from{background-position:0px;}to{background-position:-600px;}}\r\n    @-ms-keyframes play{from{background-position:0px;}to{background-position:-600px;}}\r\n    @keyframes play{from{background-position:0px;}to{background-position:-600px;}}\r\n\r\n    header {background:#4971a2; position:fixed; left:0px; top:18px; height:15%; width:100%; clear:both;}\r\n    /*\r\n    .box {flex:1;}\r\n    .box:nth-child(2){flex-grow:2;}\r\n    .flexy {display:flex;flex-direction:row;align-items:center;height:30px;background:yellow;}\r\n    * {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}\r\n    */\r\n    section {position:absolute; left:0px; top:17%;}\r\n    footer {background:#4971a2; position:fixed; left:0px; bottom:0px; height:4%; width:100%; clear:both;}\r\n    .c {text-align:center;}\r\n    .l {text-align:left;}\r\n    .r {text-align:right;}\r\n    .bold {font-weight:bold;}\r\n    .box {margin-left:4%; margin-right:4%;}\r\n    h1,h2,h3,h4,h5,h6 {font-weight:normal; color:#111;}\r\n    h1 {font-size:3em; line-height:1; margin-bottom:0.5em;}\r\n    </style>\r\n      <header>\r\n      <div class=\"flexy\">\r\n        <div class=\"box sprite\"></div>\r\n         <div class=\"box\"><h1 class=\"c bold\">IEEE Queensland Section</h1></div>\r\n        <div class=\"box\">clue</div>\r\n      </div>\r\n      </header>\r\n      <section>\r\n        <p>section</p>\r\n      </section>\r\n      <footer >\r\n        <p>footer</p>\r\n      </footer >\r\n    </body>\r\n    </html>\r\n\r\n![sprite](https://cloud.githubusercontent.com/assets/333647/6859266/aeb10bb8-d462-11e4-9243-a532c6d2f4e1.jpg)\r\n"},"comment":{"url":"https://api.github.com/repos/philipwalton/flexbugs/issues/comments/86904117","html_url":"https://github.com/philipwalton/flexbugs/issues/29#issuecomment-86904117","issue_url":"https://api.github.com/repos/philipwalton/flexbugs/issues/29","id":86904117,"user":{"login":"BlackMagic","id":333647,"avatar_url":"https://avatars.githubusercontent.com/u/333647?v=3","gravatar_id":"","url":"https://api.github.com/users/BlackMagic","html_url":"https://github.com/BlackMagic","followers_url":"https://api.github.com/users/BlackMagic/followers","following_url":"https://api.github.com/users/BlackMagic/following{/other_user}","gists_url":"https://api.github.com/users/BlackMagic/gists{/gist_id}","starred_url":"https://api.github.com/users/BlackMagic/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/BlackMagic/subscriptions","organizations_url":"https://api.github.com/users/BlackMagic/orgs","repos_url":"https://api.github.com/users/BlackMagic/repos","events_url":"https://api.github.com/users/BlackMagic/events{/privacy}","received_events_url":"https://api.github.com/users/BlackMagic/received_events","type":"User","site_admin":false},"created_at":"2015-03-27T11:13:48Z","updated_at":"2015-03-27T11:13:48Z","body":"![sprite](https://cloud.githubusercontent.com/assets/333647/6866566/4fdaa172-d4c5-11e4-88ef-f9175a029b09.jpg)\r\n\r\nSorry, I attached the wrong version of the sprite earlier.\r\n\r\nI have tested this error on Windows 7 using the latest versions of IE11, Chrome, Opera and Firefox. All browsers give the same error.\r\n\r\nToday I tested it on a friend's Mac running Safari and the problem didn't occur. When we switched to Chrome on the Mac the problem the problem appeared.  "}}