i want understand how solve this. when there's no graphics on screen(images, background images etc), transition works normally(or close enough consider ok), when there's graphics(static) on page, transition became unseeable. it's very, laggy mobile version of firefox, , default android browser, chrome(mobile) on android doing fine. didn't test apple, nice hear how doing there too, main question how solve this, work intended on ff , default android browser well.
update: great see how force gpu acceleration example, because failed forcing it, or @ least, didn't improve performance slightly. used following code background image(moved container not applying entire body), input , div
code:
-webkit-backface-visibility: hidden; -webkit-perspective: 1000; -webkit-transform: translatez(0); transform: translatez(0); html:
<span> <img src="https://image.flaticon.com/teams/new/1-freepik.jpg" alt=""> <img src="https://material.io/guidelines/static/images/callouts/default.svg" alt=""> <img src="https://maxcdn.icons8.com/share/icon/cinema//martian_filled1600.png" alt=""> </span> <div> <input type="text" class="test"> </div> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br> <br><br><br><br><br><br><br> css:
body { min-height: 100vh; background: url("http://static.boredpanda.com/blog/wp-content/uploads/2016/04/how-photographers-photoshop-their-images-landscape-photography-peter-stewart-22b.jpg") no-repeat 100% 50%; background-size: cover; } span { display:block; margin: 200px auto; background: #fff; width: 300px; text-align:center; } div { background: #333; margin: 10px auto; text-align: center; width: 300px; } img { width: 50px; height: 50px; margin: 0 auto; } .test { margin: 20px; transition: 0.5s; } .test:focus { margin-top: 100px; transition: 0.5s; }
Comments
Post a Comment