Safari hides element when applying translate3d transition inside another transition

Question

I noticed that in the latest Safari 11.1 (working fine in Chrome and Firefox), an element with a translate3d transition disappears on the screen when applying it within another element that also contains a translate3d transition.

Reproduction here: https://jsfiddle.net/chq2qfm8/66/

Video:

Have you tried `backface-visibility: hidden; transform-style: flat;` — user, Feb 26 '18 at 17:31
Yeah, I tried: https://jsfiddle.net/chq2qfm8/74/ Not working either. — Alvaro, Feb 28 '18 at 11:46
Try to add a translateZ and set it to 0, this should hopeful fix the glitch else report the bug to Apple so the can fix it in the next update — TheCrazyProfessor, Mar 02 '18 at 12:30
@TheCrazyProfessor translateZ is added automatically when using `translate3d`, right? Only necessary if using translateX or translateY, which is my not case. — Alvaro, Mar 05 '18 at 15:10

Kosh · Accepted Answer · 2018-02-28T16:00:47.240

Looks like Safari is new IE, but you can use translateY which is "3d" too:

Update as PO "might have X movement too" I've added X component as well.

init();

function init() {
  bindEvents();
}

function bindEvents() {
  document.querySelector('.scrollUp').addEventListener('click', scrollUp, false);
  document.querySelector('.scrollDown').addEventListener('click', scrollDown, false);

}

function scrollDown() {
  document.querySelector('.panels')
  .style.transform = 'translateX(100px) translateY(-' + window.innerHeight + 'px)';

  document.querySelector('.panel1 .panel-bg')
  .style.transform = 'translateX(100px) translateY(-20px)';


  document.querySelector('.panel2 .panel-bg')
  .style.transform = 'translateX(-100px) translateY(-20px)';
}

function scrollUp() {
  document.querySelector('.panels')
  .style.transform = 'translateX(0) translateY(0)';

  document.querySelector('.panel1 .panel-bg')
  .style.transform = 'translateX(-100px) translateY(-20px)';

  document.querySelector('.panel2 .panel-bg')
  .style.transform = 'translateX(100px) translateY(-20px)';

}

html,
body {
  overflow: hidden;
  height: 100%;
  padding: 0;
  margin: 0;
  color: red;
  font-weight: bold;
}

.panels {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 1000ms ease;
}

.panel,
.panel-bg {
  width: 100%;
  height: 100%;
}

.panel-bg {
  background-image: url(https://www.w3schools.com/howto/img_fjords.jpg);
  background-size: cover;
  transition: transform 700ms ease;
}

.panel2 .panel-bg {
  background-image: url('https://camo.mybb.com/e01de90be6012adc1b1701dba899491a9348ae79/687474703a2f2f7777772e6a71756572797363726970742e6e65742f696d616765732f53696d706c6573742d526573706f6e736976652d6a51756572792d496d6167652d4c69676874626f782d506c7567696e2d73696d706c652d6c69676874626f782e6a7067');
}

.panel {
  overflow: hidden;
}

.panel-bg {
  top: 0;
  left: 0;
  width: 100%;
}

.actions {
  position: fixed;
  z-index: 777;
  left: 20px;
  top: 20px;
}

.acions button {
  display: inline-block;
}

<div class="actions">
  <button class="scrollDown">
        Scroll down
    </button>
  <button class="scrollUp">
        Scroll up
    </button>
</div>

<div class="panels">
  <div class="panel panel1">
    <div class="panel-bg">
      TEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TEST<br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TEST</div>
  </div>
  <div class="panel panel2">
    <div class="panel-bg">
      TEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TEST<br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TESTTEST <br>TEST
    </div>
  </div>
</div>

I want to keep using `translate3d`, as I might have X movement too. And it is working fine in other browsers. — Alvaro, Feb 28 '18 at 11:46
But thanks for the answer, it seems to work for a dirty solution! — Alvaro, Feb 28 '18 at 11:52
@Alvaro, thanks for your comment! It is not "dirty" solution as it based on your example and manipulated the same `Y` component of `translate` property you showed in the question. I've updated my answer. — Kosh, Feb 28 '18 at 15:46
Sounds like the best answer so far. I'll have to modify the code to accomodate to it translateX and translateY instead of translate3d, but I guess it's the best alternative. Just wondering why translate3d doesn't work, shouldn't it be the same as also applying translateZ(0) to the element in addition to translateY and translateX? — Alvaro, Mar 05 '18 at 15:11
@Alvaro, if you add `translateZ(0)` too it will work OK. I think there's a poor `translate3d` implementation in Safari. Hope they'll have it fixed someday. — Kosh, Mar 05 '18 at 15:21

score 1 · Answer 2 · answered Mar 05 '18 at 14:17

1

"It appears forcing hardware acceleration fixes the problem"

Source

answered Mar 05 '18 at 14:17

KYL3R

3,877
1
12
26

This is not working on Safari desktop either. So probably not the same issue? – Alvaro Mar 05 '18 at 15:09

score 0 · Answer 3 · answered Jan 25 '22 at 10:31

hiii i have a tested solution

use ......input placeholder="your text" disabled..........

then use a placeHolder (assign your text on the place holder) then eliminate all background and shading of the input with css, make sure you disable the input button then style your place holder text like if it was a normal text use the following syntax to target it

::placeholder{font.size:30px; color:red;) etc...

or if you wanna target just that input in the page use

input::placeholder{ font-size:"", etc.....)

okey now your problem is solved and the text gets rendered with translate3d easily and clearly on safari however safari by default gives placeholder text opacity of 0.4 to 0.5 so its gonna be transparent how you solve that .... yes there is a way just create 2 more copies of the same input element with same placeholder title ;then give it
position :absolute; transform:translate(50%,-50%) or what ever you wish of a position just to lay them all 3 on top of each others to increase the opacity on safari , thats one way to do it after so many ways i tried and i failed ... this worked like magic

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Jan 25 '22 at 14:22

Safari hides element when applying translate3d transition inside another transition

Video:

3 Answers3