Is there a problem with css3 opacity transition in Webkit browsers?

Question

Is there a problem with css3 opacity transition in Webkit browsers?

While exploring alternative ways to modify the Bootstrap 3 carousel, I stumbled upon a technique that achieves a 'fade' effect instead of the usual 'slide'. However, in webkit browsers, the transition may appear choppy or flicker between items.

If you're interested, here is a link to the example: http://codepen.io/Rowno/pen/Afykb

What's even more peculiar is that when implementing this code on my own website, the item transitions smoothly but other elements seem to slightly shift by a pixel at the beginning of each transition. Could there be some sort of Webkit compatibility issue with opacity transitions?

css twitter-bootstrap css-transitions opacity

Answer 1

Answer №1

When tackling this issue, it is important to explore different approaches. One effective solution, as suggested in response to this specific inquiry, involves incorporating the following snippet into the element undergoing the transition:

-moz-transform: translateZ(0);

The utilization of this code not only resolves the opacity transition problem demonstrated in the Codepen example on Webkit browsers but also successfully addresses a similar issue encountered within my own coding environment.

Answer 2

When tackling this issue, it is important to explore different approaches. One effective solution, as suggested in response to this specific inquiry, involves incorporating the following snippet into the element undergoing the transition:

-moz-transform: translateZ(0);

The utilization of this code not only resolves the opacity transition problem demonstrated in the Codepen example on Webkit browsers but also successfully addresses a similar issue encountered within my own coding environment.

Answer 3

Answer №2

revamp the look of your webpage by changing the background color and ensuring a smooth transition effect

body{
 bacground:black; 
}
.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition: opacity 300ms ease-in-out;
      -moz-transition: opacity 300ms ease-in-out;
       transition: opacity 300ms ease-in-out;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}



html, 
body, 
.carousel, 
.carousel-inner, 
.carousel-inner .item {
  height: 100%;
}

.item:nth-child(1) {
  background: darkred;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: orange;
}

Answer 4

revamp the look of your webpage by changing the background color and ensuring a smooth transition effect

body{
 bacground:black; 
}
.carousel-fade {
  .carousel-inner {
    .item {
      opacity: 0;
      -webkit-transition: opacity 300ms ease-in-out;
      -moz-transition: opacity 300ms ease-in-out;
       transition: opacity 300ms ease-in-out;
    }

    .active {
      opacity: 1;
    }

    .active.left,
    .active.right {
      left: 0;
      opacity: 0;
      z-index: 1;
    }

    .next.left,
    .prev.right {
      opacity: 1;
    }
  }

  .carousel-control {
    z-index: 2;
  }
}



html, 
body, 
.carousel, 
.carousel-inner, 
.carousel-inner .item {
  height: 100%;
}

.item:nth-child(1) {
  background: darkred;
}

.item:nth-child(2) {
  background: red;
}

.item:nth-child(3) {
  background: orange;
}

Is there a problem with css3 opacity transition in Webkit browsers?

Answer №1

Answer №2

Similar questions

Dynamic header following the scroll position

What is the best way to ensure the header expands to fill the entire width when zooming out?

Inherit margins from child elements with fixed positions

Position the table at the bottom of the page using CSS

Pop-up window for uploading files

The search box implemented in the navbar of AngularJS retrieves data to display in a table

How to center align an HTML page on an iPhone device

Offsetting absolute elements in a horizontal landscape view

The drop-down menu fails to appear when I move my cursor over it

Alignment of a div at the bottom inside a jumbotron using Bootstrap 4

Ways to incorporate design elements for transitioning focus between different elements

Safari Mobile not rendering absolute positioning correctly

Is there a way to shift this modal to the right?

Toggle a jQuery bar based on the presence of a specific CSS class

Image Positioned Outside Border in HTML

Tips for transferring simple CSS formatting to an independent stylesheet

I require a modification in the style of every anchor element found within a div containing the designated class

Preventing page refresh when typing in a form input: Tips and tricks

Dynamically scrolling an element using jQuery without specifying specific values

How do I incorporate left, right, and top labels with Material-ui Toggle switches?