div only renders after css transform is complete, on iphone (safari)

Question

On iphone safari browser a div element containing text isn't rendered while it is sliding onto screen. However, remove the text inside the div and it works!

Bug occurs on iphone 5, so IOS Safari 10. (I tested safari 11 and it works correctly)

Here is a jsFiddle which might explain better. https://jsfiddle.net/pip36/wtkodwr6/

 let button = document.getElementById('move-button'); let block = document.getElementById('red-block'); let hasMoved = false; button.addEventListener('click', () => { if (hasMoved) { setTransform(0); hasMoved = false; } else { setTransform(-300); hasMoved = true; } }) function setTransform(pixels) { block.style.transform = 'translateX(' + pixels + 'px)'; } 

 .container { perspective: 300px; } .parent { transform-style: preserve-3d; } .block { width: 200px; height: 200px; background: red; transition: transform 1s; } button { width: 200px; height: 50px; } 

 <div class="container"> <div class="parent"> <div id="red-block" class="block"> <!-- remove text and it works --> HELLO </div> </div> </div> <button id="move-button"> MOVE </button> 

I would appreciate any help and possible workarounds. Many Thanks!

Answer 1

I'm not sure if anyone will ever replicate the problem, but I'll post my solution in case it helps anyone with a similar issue.

//Forces redraw of element
image.style.opacity = 0.99
setTimeout(() => {
  image.style.opacity = 1
}, 250)

Toggling the opacity just after the element slides into the screen forces a redraw, and the opacity switch itself is not noticeable. Ugly, but works.