12

I am creating a complex prototype for a Webapp (I am using Cordova to deploy it to my iPhone), and I am having the following problem:

DOM-Elements (which are not created using JavaScript but are right there in the static HTML-File) are there (they show up in the right size in the inspector) but are not visible. Sometime they are simply not being displayed, sometimes they are partly displayed, sometimes parts of them are shown at a different location. The inspector shows their "bodies" always on the right position.

There is a strange solution: As soon as an CSS property is changed after loading the side (for example unchecking and checking any property of any element in the inspector – sometimes changing a property programmatically also works) they are show correctly. The problem is occurring both in Safari and Chrome but not in Firefox (maybe a Webkit problem?). It’s worst in Safari Mobile (which is were I need it to work the most).

Using the transform: translate3d(0); hack helped at first, but doesn’t anymore – I am using and animating lots of Flexbox-elements. I am a simply asking to much from the browser?

Edit: The problem seems to occur only after I have scrolled in one container. After I have scrolled certain (completely unrelated) elements disappear.

chl
  • 380
  • 3
  • 18
  • See: [How to create a Minimal, Complete, and Verifiable example](http://stackoverflow.com/help/mcve). – Oriol Jun 25 '15 at 21:48
  • I have tried to create an example, but it’s really hard to recreate. Especially since it’s only happening when a degree of complexity is reached. I am not sure which part of my code is responsible for the problem and I don’t think posting it here entirely would help anything. I will try creating an example again later, but I am not sure wether I will be able to do that. – chl Jun 26 '15 at 08:36
  • I simply can’t pin down why this keeps happening. I have removed all Flexbox Code, did’t work. I have replaced `-webkit-overflow-scrolling: touch; ` with the iScroll-Library, because whenever I scrolled it broke, it worked for a while but now it is happening again. I think it is because there are too many elements (there aren’t that many …) but even when I use jQuery to only load them when they are visible and empty the divs when they are not it still happens. – chl Jun 30 '15 at 10:39

2 Answers2

6

Try one of the following to your animated element.

transform: translatez(0)

or

backface-visibility: hidden;

or

will-change: transform;
Naren Srinivasan S
  • 350
  • 3
  • 7
  • 1
    backface-visibility: hidden; worked for me. It's probably related to 3d hardware acceleration somehow. – Rorok_89 Apr 08 '19 at 15:23
2

In case this is destroying anyone else's life, try checking to see if you're setting display: flex on a button element. I guess you're not supposed to do that although every other OS and browser seems to be okay with it.

user3521314
  • 464
  • 6
  • 14
  • Your answer set us on the right path, but it was actually a case of nested flexboxes which caused the issue. – Alex M. Mar 22 '21 at 14:10