Why -Webkit-Transform: Translate3D(0, 0, 0) Messes Up with Fixed Childs

pop-up fixed alignment in center only works on mobile view

One of the parent divs .page-container has the following CSS : transform: translate3d(0, 0, 0);

This completely messes up the position:fixed and your popup starts scrolling with the page.

Remove transform: translate3d(0, 0, 0); on the parent, and the popup behaves normally.

Why does my iframe bug out when there's an animation on the parent's parent?

Remove animation-fill-mode: forwards;

From the developer.mozilla.org

The target will retain the computed values set by the last keyframe
encountered during execution. The last keyframe depends on the value
of animation-direction and animation-iteration-count

transform3d(): Using Percentage to Move Within Parent Object

I don't think there's a CSS-only solution.
My approach is calculating the relation between the width of the wrapping element and the width of the child with JavaScript before multiplying it with your target X-value:

var transform = "translate3d(" + translateX * (wrapperCompWidth / innerCompWidth) + "%,0,0)";

Here's a working example of what I mean: http://jsfiddle.net/Whre/7qhnA/2/

Circle divided by sectors doesn't respect overflow: hidden

It seems to be related to the use of 3D transform. I don't know exactly why but it works fine if you remove (it's also not needed)

body {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-template-rows: repeat(2, 1fr);

  grid-gap: 10px;

}

.circle {

  background-color: #444;

  border-radius: 50%;

  height: 150px;

  overflow: hidden;

  transform: rotate(90deg);

  width: 150px;

  display: inline-block;

  --accent: salmon;

}

li {

  background: var(--accent);

  border: 1px solid #444;

  box-sizing: border-box;

  height: 50%;

  list-style-type: none;

  position: absolute;

  right: 0px;

  top: 0px;

  transform-origin: 0px 100%;

  user-select: none;

  width: 50%

}

li:nth-child(1) {

  transform: rotate(0deg) skewY(-60deg) 

}

li:nth-child(2) {

  transform: rotate(30deg) skewY(-60deg) 

}

li:nth-child(3) {

  transform: rotate(60deg) skewY(-60deg) 

}

li:nth-child(4) {

  transform: rotate(90deg) skewY(-60deg) 

}

li:nth-child(5) {

  transform: rotate(120deg) skewY(-60deg) 

}

li:nth-child(6) {

  transform: rotate(150deg) skewY(-60deg) 

}

li:nth-child(7) {

  transform: rotate(180deg) skewY(-60deg) 

}

li:nth-child(8) {

  transform: rotate(210deg) skewY(-60deg) 

}

li:nth-child(9) {

  transform: rotate(240deg) skewY(-60deg) 

}

li:nth-child(10) {

  transform: rotate(270deg) skewY(-60deg) 

}

li:nth-child(11) {

  transform: rotate(300deg) skewY(-60deg) 

}

li:nth-child(12) {

  transform: rotate(330deg) skewY(-60deg) 

}

<div class="circle">

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

  <li></li>

</div>

How to make css not ignore transform function after removing class with jquery

Your code seems to work quite well.

I just added a transition for the transform, and set the color to not be white, and it looks ok to me. Check the below snippet:

$(function() { 

    setTimeout(function() {

      $('.intro-text').removeClass('content-hidden');

    }, 500);

  });

.intro-text { 

  list-style: none;

}

.intro-text li {

  display: inline-block;

  margin-right: 40px;

  font-family: '28Days';

  font-weight: 300;

  font-size: 4em;

  color: red;

  opacity: 1;

  transition: opacity 3.5s ease, transform 3.5s ease;

}

.intro-text li:last-child {

  margin-right: 0;

}

.content-hidden li { 

  opacity: 0; 

}

.content-hidden li:nth-child(1) { transform: translateY(100px);}

.content-hidden li:nth-child(2) { transform: translate3d(0, -100px, 0);}

.content-hidden li:nth-child(3) { transform: translate3d(0, 100px, 0);}

.content-hidden li:nth-child(4) { transform: translate3d(0, -100px, 0);}

.content-hidden li:nth-child(5) { transform: translate3d(0, 100px, 0);}

.content-hidden li:nth-child(6) { transform: translate3d(0, -100px, 0);}

.content-hidden li:nth-child(7) { transform: translate3d(0, 100px, 0);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="intro-section">

  <div class="intro-wrap">

    <ul id="intro-list" class="intro-text content-hidden">

      <li>W</li>

      <li>E</li>

      <li>L</li>

      <li>C</li>

      <li>O</li>

      <li>M</li>

      <li>E</li>

    </ul>

  </div>

</div>

3D Transform z-index broken with firefox, preserve-3d not preserved

Unfortunately, z-ordering is not working fine with cycled layers. It is a known problem that Firefox doesn't handle at all currently. That's an old Firefox bug and you can't fix it until they fix the bug in the browser.

parent & child with position fixed, parent overflow:hidden bug

Because a fixed position element is fixed with respect to the viewport, not another element. Therefore since the viewport isn't cutting it off, the overflow becomes irrelevant.

Whereas the position and dimensions of an element with
position:absolute are relative to its containing block, the position
and dimensions of an element with position:fixed are always relative
to the initial containing block. This is normally the viewport: the
browser window or the paper’s page box.

ref: http://www.w3.org/wiki/CSS_absolute_and_fixed_positioning#Fixed_positioning

Why does my iframe bug out when there's an animation on the parent's parent?

Remove animation-fill-mode: forwards;

From the developer.mozilla.org

The target will retain the computed values set by the last keyframe
encountered during execution. The last keyframe depends on the value
of animation-direction and animation-iteration-count

Fixed menu loses its fixed when off canvas menu is open

It's because positioning is relative to the element that it's inside of. #container has position: relative and #header has position: fixed, so the header was fixed to the top of container (and would scroll up with it), rather than to the page, like you'd want.

I moved #header out of #container in your HTML and added this line in your CSS:

.menu-open #header {
  transform: translate(-300px, 0);
}

I removed all of your position: relative properties. They're not needed in this case. All elements are set to position: static by default. You only need position: relative when you're positioning it's children absolutely.

I also changed translate3d to just translate just in case. Sometimes translate3d can mess with stuff when you're positioning things.

I forked your JSFiddle with some changes here.

---

Related Topics