css - transition working only on DIV safari IOS -


i have animation sequence follows: 

.page{      position: absolute;      left: 0;      right: 0;      top: 0;      bottom: 0;      overflow: hidden;  }  .second {      z-index: 3;      padding: 4em 0;      display: -webkit-box;      display: -ms-flexbox;      display: flex;      -webkit-box-orient: vertical;      -webkit-box-direction: normal;      -ms-flex-direction: column;      flex-direction: column;      -webkit-box-pack: justify;      -ms-flex-pack: justify;      justify-content: space-between;      -webkit-box-align: start;      -ms-flex-align: start;      align-items: flex-start;      background: url("assets/images/man.png") no-repeat right bottom,#fff;      background-size: 90%  }    .second h1 {      font-size: 3rem;      padding-left: 10%;      padding-right: 10%;      -webkit-transform: translatex(0);      transform: translatex(0);      -webkit-transition: -webkit-transform 600ms ease-in-out;      transition: -webkit-transform 600ms ease-in-out;      transition: transform 600ms ease-in-out;      transition: transform 600ms ease-in-out, -webkit-transform 600ms ease-in-out  }    .bottom-group {      width: 100%  }    .ribbon {      width: 90%;      height: .5em;      background: rgba(214,176,153,0.7490196078);      margin-left: 10%;      -webkit-transform: translatex(0);      transform: translatex(0);      -webkit-transition: -webkit-transform 600ms ease-in-out 600ms;      transition: -webkit-transform 600ms ease-in-out 600ms;      transition: transform 600ms ease-in-out 600ms;      transition: transform 600ms ease-in-out 600ms, -webkit-transform 600ms ease-in-out 600ms  }    .ribbon.bottom {      -webkit-transition: -webkit-transform 600ms ease-in-out 1800ms;      transition: -webkit-transform 600ms ease-in-out 1800ms;      transition: transform 600ms ease-in-out 1800ms;      transition: transform 600ms ease-in-out 1800ms, -webkit-transform 600ms ease-in-out 1800ms  }    .middle {      background: rgba(214,176,153,0.4980392157);      padding: .5em 0;      width: 100%;      -webkit-transform: translatex(0);      transform: translatex(0);      -webkit-transition: -webkit-transform 600ms ease-in-out 600ms;      transition: -webkit-transform 600ms ease-in-out 600ms;      transition: transform 600ms ease-in-out 600ms;      transition: transform 600ms ease-in-out 600ms, -webkit-transform 600ms ease-in-out 600ms  }    .middle img {      width: 100%;      display: block;      padding-left: 10%;      padding-right: .5rem;      opacity: 1;      -webkit-transition: opacity 600ms ease-in-out 1200ms;      transition: opacity 600ms ease-in-out 1200ms  }    .img-container {      margin-left: 10%;      display: table;      overflow: hidden  }    .img-container img {      width: 4em;      -webkit-transform: translatex(0);      transform: translatex(0);      -webkit-transition: -webkit-transform 600ms ease-in-out 2400ms;      transition: -webkit-transform 600ms ease-in-out 2400ms;      transition: transform 600ms ease-in-out 2400ms;      transition: transform 600ms ease-in-out 2400ms, -webkit-transform 600ms ease-in-out 2400ms  }    .second.out h1 {      -webkit-transform: translatex(-150%);      transform: translatex(-150%)  }    .second.out .ribbon {      -webkit-transform: translatex(150%);      transform: translatex(150%)  }    .second.out .middle {      -webkit-transform: translatex(-150%);      transform: translatex(-150%)  }    .second.out .middle img {      opacity: 0  }    .second.out .img-container.top img {      -webkit-transform: translatex(110%);      transform: translatex(110%)  }    .second.out .img-container.bottom img {      -webkit-transform: translatex(-110%);      transform: translatex(-110%)  }
  <div class="page second out">      <h1>we people achieve healthy skin</h1>      <div class="bottom-group">        <div class="img-container top"><img src="assets/images/lion.png" alt="lion image"></div>        <div class="ribbon top"></div>        <div class="middle">          <img src="assets/images/text.png" alt="lion image">        </div>        <div class="ribbon bottom"></div>        <div class="img-container bottom"><img src="assets/images/leo.png" alt="leo"></div>      </div>    </div>

i trigger animation removing "out" class parent. animation works fine on mac osx safari except when running on ios safari transition h1 , images doesn't work works fine divs.

any ideas why might happening??


Comments

Post a Comment

Popular posts from this blog

php - Vagrant up error - Uncaught Reflection Exception: Class DOMDocument does not exist -

i've set bento/ubuntu-16.04 vagrant box using php 5.6, , getting following error quite few times when try , run shell script: "uncaught reflection exception: class domdocument not exist". i've tried adding following top of script (not together), each no success: "sudo apt-get install php5.6-xml", "sudo apt-get install php5-xml", "sudo apt-get install php-dom" i've tried resetting server "sudo service apache2 restart". does have suggestions?
Read more

vue.js - Create hooks for automated testing -

Image
qa guys complained can't automate frontend testing. because our html looks same outside. lazy hack did this <template> <div :role="$options.name"> ... </div> </template> <script> export default { name: 'vmcomponentname' } </script> which takes name script , applies html. in browser get: <div role="vmcomponentname"> ... </div> line :role="$options.name" goes in every component. is there dry er solutions? please share. additional details i'll explain in details looking for. imagine have vmusercreate form creates user. test case can create user . to automatically test without role, have use following selector: .wrapper > .wrapper > .wrapper > .submit-button the test extremely brittle (will break lot). if use roles can use [role="vmusercreateform"] .submit-button selector. many folds less brittle. so basically, i'm ...
Read more

Add new key value to json node in java -

i have json file : { "id":1, "name":"abc", "addressdetails": { "city":"newyork" } } i wanted add 1 more key-value ("pincode" : "414141") node 'addressdetails'. i tried using : objectmapper mapper = new objectmapper(); jsonnode root = mapper.readtree(new file("d://test.json")); objectnode node = mapper.createobjectnode(); node.with("addressdetails").put("pincode", "414141"); but it's not getting added, there way can ? you can try you should modify file path objectmapper mapper = new objectmapper(); objectnode nodes = mapper.readvalue(new file("d:\\test.txt"), objectnode.class); nodes.with("addressdetails").put("pincode", "414141"); mapper.writer().writevalue(new file("d:\\test.txt"), nodes);
Read more