{"id":1046,"date":"2012-05-09T20:33:54","date_gmt":"2012-05-10T03:33:54","guid":{"rendered":"http:\/\/zsprawl.com\/iOS\/?p=1046"},"modified":"2012-05-09T20:33:54","modified_gmt":"2012-05-10T03:33:54","slug":"fixing-the-page-flicker-during-css-slide","status":"publish","type":"post","link":"http:\/\/zsprawl.com\/iOS\/2012\/05\/fixing-the-page-flicker-during-css-slide\/","title":{"rendered":"Fixing the Page Flicker During CSS Slide"},"content":{"rendered":"<p>Recently, I posted a really popular post on <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/05\/fixing-the-transitions-in-jquery-mobile-1-1-0\/\">how to revert back to jQuery Mobile 1.0.1 transitions<\/a>. It works pretty dang well for the most part, but still suffers from some of the issues previously documented. For example, there is generally a page flicker at the end of the transitions on the iPad. This can be fixed with the following CSS code.<\/p>\n<p>[code].ui-page {<br \/>\n    -webkit-backface-visibility: hidden;<br \/>\n}[\/code]<\/p>\n<p>However, this isn&#8217;t good enough for the iPhone. When using fancy listviews or collapsible divs, during the slide transition, there is a flicker of the destination page as it is prepped to be moved into view. After fighting it for hours, commenting out portions of my code, I finally figured out how to fix it with yet another simple CSS statement.<\/p>\n<p>[code].ui-mobile-viewport-transitioning,<br \/>\n.ui-mobile-viewport-transitioning .ui-page {<br \/>\n    overflow: visible;<br \/>\n}[\/code]<\/p>\n<p>That last one kinda makes sense. It allows the destination page to be moved into view off the screen, rather than causing the brief flash as it is moved into the frame. I guess&#8230; anyhow it worked great, so I thought I&#8217;d share.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Recently, I posted a really popular post on how to revert back to jQuery Mobile 1.0.1 transitions. It works pretty dang well for the most part, but still suffers from some of the issues previously documented. For example, there is generally a page flicker at the end of the transitions on the iPad. This can <a href=\"http:\/\/zsprawl.com\/iOS\/2012\/05\/fixing-the-page-flicker-during-css-slide\/#more-'\" class=\"more-link\"><br \/>more \u00bb<\/a><\/p>\n","protected":false},"author":318,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[24,43,25],"tags":[36,120],"class_list":["post-1046","post","type-post","status-publish","format-standard","hentry","category-blog","category-css","category-jquery-mobile","tag-css3","tag-jquery-mobile"],"aioseo_notices":[],"_links":{"self":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1046"}],"collection":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/users\/318"}],"replies":[{"embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/comments?post=1046"}],"version-history":[{"count":3,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1046\/revisions"}],"predecessor-version":[{"id":1049,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/posts\/1046\/revisions\/1049"}],"wp:attachment":[{"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/media?parent=1046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/categories?post=1046"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/zsprawl.com\/iOS\/wp-json\/wp\/v2\/tags?post=1046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}