19631

Elements using CSS transitions do not appear on iP

Question:

I'm working on a web page that uses a lot of CSS animations (mostly TranslateY) that are triggered at various scroll positions through JQuery. It works great across Webkit, FF, IE, etc. Unfortunately, on iPhone and iPad, some (but not all) of the elements just don't appear. I'm aware of the differences of 'scrolling' on mobile versus desktop and have confirmed that the class being added to fire the animations is actually getting added.

I plugged the iPad into my desktop and have been using Safari's Mobile Web Inspector to poke around... what's really weird is that I have confirmed that the animations are firing and the divs are moving around, they just aren't visible... UNTIL I add a line of style to the div in the inspector. As soon as I start typing anything, literally even just a blank line, the element appears! This has me totally stumped. I've tried adding a z-index but don't know what else to do.

I'm using Safari 6.1.1, the latest version as of this writing. Also, turning off overflow:hidden; on the parent container has helped, but unfortunately, I need overflow:hidden; for this application.

Any help is appreciated, thanks -

This is how I add the class for the animation:

function getTopHeight() { return (document.body.scrollTop) ? document.body.scrollTop : document.documentElement.scrollTop; } $(window).scroll(function() { // Manage animations on scroll on the 'our story' page. if (getTopHeight() >= 442){ $('.tree-1').addClass('popup-animation'); } ...

And these are some CSS rules I have surrounding that animation:

.tree-1{ transition: all 0.5s; -webkit-transition: all 0.5s; /* Safari */ -moz-transition: all 0.5s; /* FF */ } .popup-animation{ -ms-transform: translateY(-330px); -webkit-transform: translateY(-330px); -moz-transform: translateY(-330px); }

Answer1:

Following some of the solutions on this somewhat related SO question, I was able to solve my problem by adding:

-webkit-transform-style: preserve-3d;

... to the elements being translated.



Recommend

  • Elements using CSS transitions do not appear on iPad/iPhone until inspected with Safari web inspecto
  • Can you test for browser support for -moz-linear-gradient?
  • Magento custom fields on checkout
  • How to use Werkzeug interactive traceback debugger in a Django project hosted on Heroku?
  • HtmlAnchor click() function in Htmlunit is not working
  • Problem with jquery ajax and google chrome
  • HTML5 embed tag - event attributes not firing (onended, onpause etc)
  • Preventing ctrl+z in browser
  • How to cache images only in disk using Kingfisher?
  • Reading contents of a managed bean with reflection in a JSF application
  • Why do native C++ projects have a TargetFrameworkVersion?
  • How can I fill all space of a div 100% with 3 divs with the same size?
  • Vim ctags behaves strangely
  • TFS edit build log using custom activity
  • Storing data from SQL in array
  • Android libgdx prefs getting lost
  • QTP UFT Unable to find row count from table
  • cordova build android throws error on Ubuntu 12.04
  • Chrome breakpoint on radio doesn't fire
  • Unique SMS sender id?
  • jQueryMobile, Ajax Navigation, and MVC
  • How to load Q library with Require.js?
  • Which browser have this strange user agent? (IOS device)
  • Rails 5 - Google Maps - Javascript error - initMap is not a function - fixing one js issue creates a
  • Python/Javascript: WYSIWYG html editor - Handle large documents fast and/or design theory
  • Android onKey w/ virtual keyboard
  • How do I Dispose a HttpResponseMessage in my Web Api Method?
  • Remove changes from one element when event occurs on another element?
  • How to define and use opencv mat of user type
  • Reading JSON from a file using C++ REST SDK (Casablanca)
  • FB SDK and cURL: Unknown SSL protocol error in connection to graph.facebook.com:443
  • Cassandra Data Model
  • Is there a mandatory requirement to switch app.yaml?
  • Getting Messege Twice Using IMvxMessenger
  • Java static initializers and reflection
  • unknown Exception android
  • Observable and ngFor in Angular 2
  • UserPrincipal.Current returns apppool on IIS
  • Unable to use reactive element in my shiny app
  • Python/Django TangoWithDjango Models and Databases