DOM-Elements are there but not visible, until some CSS property is changed

Question

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.

Answer 1

Try one of the following to your animated element.

transform: translatez(0)

or

backface-visibility: hidden;

or

will-change: transform;