html - Background size shrinks from 'cover' to 50% when using a keyframe animation on 'transform: scale' in Firefox -

-

i'm trying animate 'transform: scale' property of ::before pseudo element scale(1) scale(1.1), meant animated background of div covers whole viewport. background-size set 'cover' , displays correctly on page load, when animation kicks in after short delay, background shrinks 50% of viewport. works expected in safari, chrome , opera (on mac), on firefox (mac) behaviour described above. on top of that, when resizing browser window down smaller size, displays fine again, see issue in firefox, browser window needs @ least wider 1000px.

example below (jsfiddle: http://jsfiddle.net/yuy4u/embedded/result/).

html:

<!doctype html> <html>   <head>     <title>animation test case</title>     <link href="style.css" rel="stylesheet">   </head>   <body>     <div>this div</div>   </body> </html>

css:

html {   height: 100%;   width: 100%; } body {   height: 100%;   margin: 0;   padding: 0;   width: 100%;   overflow: hidden; } div {   width: 100%;   height: 100%; } div::after {   background: url("http://fineartamerica.com/images-simple-print/images-medium/33-landscape-odon-czintos.jpg") top center no-repeat;   background-size: cover;   content: "";   display: block;   position: absolute;   top: 0; left: 0;   width: 100%;   height: 100%;   z-index: -2;   -moz-animation: bg-anim 10s linear 2s infinite;   -webkit-animation: bg-anim 10s linear 2s infinite;   -moz-transform: scale(1);   -webkit-transform: scale(1);   transform: scale(1); } @-moz-keyframes bg-anim {   0% {     -moz-transform: scale(1);     transform: scale(1);   }   50% {     -moz-transform: scale(1.1);     transform: scale(1.1);   } } @-webkit-keyframes bg-anim {   0% {     -webkit-transform: scale(1);     transform: scale(1);   }   50% {     -webkit-transform: scale(1.1);     transform: scale(1.1);   } } @keyframes bg-anim {   0% {     -moz-transform: scale(1);     -webkit-transform: scale(1);     transform: scale(1);   }   50% {     -moz-transform: scale(1.1);     -webkit-transform: scale(1.1);     transform: scale(1.1);   } }

i've tried changing background-size property percentage value, didn't fix problem , not solution project. i've tried changing scale values 1 , 0.9, works fine, background doesn't cover whole viewport not acceptable situation either.

any ideas on how work around issue? have missed obvious or browser bug or browser-specific implementation discrepancy even?


Comments

Post a Comment

Popular posts from this blog

java - WrongTypeOfReturnValue exception thrown when unit testing using mockito -

-
my test list<person> mylist; @test public void testisvalidperson() { mylist = new arraylist<person>(); mylist.add(new person("tom")); when(persondao.get(person)).thenreturn(mylist); when((persondao.get(person)).isempty()).thenreturn(false);//------exception thrown boolean result = service.isvalid("tom"); assertfalse(result); } method tested: public boolean isvalid(string person){ persondao = new persondao(); person personobj = new person(person); return (persondao.get(person).isempty())?false : true; } exception thrown: org.mockito.exceptions.misusing.wrongtypeofreturnvalue: boolean cannot returned get() get() should return list *** if you're unsure why you're getting above error read on. due nature of syntax above problem might occur because: 1. exception *might* occur in wrongly written multi-threaded tests. please refer mockito faq on limitations of concurrency testing. 2. sp
Read more

php - Magento - Deleted Base url key -

-
i working on cleaning url: http://mydomain.com/shop/shop/deals i going through settings in configuration tab in admin panel on magento , change secure , unsecure base urls remove first base url "shop" web page read: http://mydomain.com/shop/deals so changed unsecure base urls mydomain.com/shop mydomain.com , secure 12.345.67.89/shop 12.345.67.89. wrong thing do. i cannot reload page or admin console. how access these files through ftp , change correctly there?? when make changes in admin panel changes made in database not in file. have make changes in database. 1.go database , select core_config_data table under table find web/unsecure/base_url , web/secure/base_url . make changes here. don't forget clear cache in var/cache folder
Read more

android - How to disable Button if EditText is empty ? -

-
i have edittext , button in application. when button clicked,the text entered in edittext added listview. i want disable button if edittext empty.how ? this code button click imagebutton imb=(imagebutton)findviewbyid(r.id.btn_send); imb.setonclicklistener(new onclicklistener() { @override public void onclick(view arg0) { edittext et = (edittext)findviewbyid(r.id.edittext1); string str = et.gettext().tostring(); web1.add(str); toast.maketext(shoutsingleprogram.this, "you entered...."+str, toast.length_short).show(); adapter1.notifydatasetchanged(); et.settext(""); } }); } how can ? edittext1.addtextchangedlistener(new textwatcher() { @override public void ontextchanged(charsequence s, int start, int before, in
Read more