Flash of hidden content on Safari / iOS Safari

[machty]

I've been battling this issue for a while and I can't seem to nail it down; my app uses sideway transitions between screens, and if one of these screens has a liquid-anything inside of it, it causes a flash on Safari of not just elements inside that liquid-whatever, but also some elements around it. It must be some kind of style invalidation specific to Safari that's causing the flash:

I've gotten it to go away if I style the liquid container/child to be visibility: hidden, but that means it's hidden on initial display until its first transition.

DEBUG: -------------------------------
vendor.js:18350 DEBUG: Ember  : 1.11.0-beta.3
vendor.js:18350 DEBUG: jQuery : 1.11.1
vendor.js:18350 DEBUG: -------------------------------

Liquid Fire version 0.18.0

I'm doing my best to reproduce conditions at this JSBin but I can't the flash to show up on Safari there. I'll keep investigating but wanted to post this issue to see if anyone else is running into it.

[machty]

I found a workaround.

I replaced this line with this:

    this.$().css({visibility: 'hidden', display: 'none'});//.hide();

If you have >= 2 liquid children on the page at once, you wind up with the following, which apparently causes a flash on Safari:

I think invalidating the style after it's been recalculated (or some similar event) causes the flash on Safari, but if you get rid of the recalculation (which .hide() does internally to stash the currently display state for future re-display) then you can avoid this.

I'm uncertain if this'll even be an issue on master, when I have a chance to upgrade I will update this ticket.

[ef4]

Sounds good. This code did change on master, and I don't think I'm still using jQuery's hide anywhere.

[machty]

I think this was fine for a while but I'm seeing it again on latest, will investigate shortly

[machty]

Update: on Liquid Fire master, the way I fixed this was to 1) add a CSS rule to .liquid-child { visibility: 'hidden'; } and 2) provide my own version of https://github.com/ef4/liquid-fire/blob/master/app/transitions/default.js which sets visibility to 'visible' (instead of default '')

[tim-evans]

I'm encountering this flash on master where I have a modal that has .liquid-children inside of it. @machty's solutions solves for most of this

[FilmKnurd]

Same issue, but for any browser, not just mobile Safari. @machty 's solution worked to keep the content of the next route from flashing visible before the transition completed.

[knownasilya]

Pretty sure I see this issue on macOS Safari still.