Very difficult to solve and strange CSS3 opacity transition issue (...must be a bug?)

Error processing SSI file


  1. Jefferson

    • 2018/7/21

    Thanks to vals for pointing out the GPU aspect... This reminded me of this CSS-Snippet which tends to solve Chrome rendering issues:

    -webkit-transform: translateZ(0);

    I've applied this to the container ( containing the problematic item (i.icon-) which has a fraction width, problem solved!

    Credit: I've got this solution from this answer to fix incorrectly rendered (fixed) elements after navigating to an page anchor.

  2. Joshua

    • 2018/5/7

    One fundamental problem with CSS Opacity property is that if specified for a parent element, it affects all children element as well. If you set background of a div element to transparent, then all children elements (like text and images) of the parent div will also be set to transparent.

  3. William

    • 2015/9/8

    Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).

  4. Jonah

    • 2019/8/4

    RGBa is a way to declare a color in CSS that includes alpha transparency support. It looks [if IE]> <style type="text/css"> .color-block { background:​transparent; 

  5. Calum

    • 2020/5/18

    use the following css hint to promote the affected element to a new composite layer (It solved the same exact issue to me):

    .<your-css-selector> {
    will-change: <css style about to change. example: opacity>;}

    This indicate the compositor to isolate the paint process of the element into a new composite layer. When inspecting layers in chrome dev tools you can make sure the element has been promoted, and thence the issue solved. The element will appear in a new layer with the following 'Compositing reasons: has an active accelerated animation or transition. Has a will-change compositing hint.'

    Looks like after promoting the element to a new layer this way, the browser is able to render the final state of the transition correctly.


  6. Johnson

    • 2015/7/23

    opacity:1; filter:alpha (opacity=100); } The filter statement is for IE compatibility, while opacity is the CSS standard which is used by all other browsers (FireFox, Opera, Safari). moz-opacity is only used in really old Mozilla browsers such as Netscape Navigator.

  7. Marino

    • 2018/3/1

    Lecture Information. Monday, March 15, 2021; 9:00 am EST; Live Lecture Webinar There will be no in-person lecture. If 

  8. Ricky

    • 2016/1/15

    You just use the opacity property, like this: .thing { opacity: 0.5;} 0 is totally transparent (will not be visible at all, like visibility: hidden;) and 1 is totally opaque (default). Anything in between is partially transparent.

  9. Adriel

    • 2015/2/8

    On thins link you can find solution for Mozilla bug.

    You need to add 1 CSS rule:

    -moz-backface-visibility: hidden;
  10. Girard

    • 2018/4/29

    The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the 

  11. Eliseo

    • 2017/5/10

    Yes, but not all CSS3 properties are recognized, e.g. keyframe animation; Depends on which effects. There are some libraries doing this. those are vendor-specific properties. In older browsers / those browsers that does not support the CSS standards, they adopt these vendor-specific properties in order to show the CSS properties.

  12. Bentley

    • 2020/12/31

    About the "transparency with hex value". I may have it wrong but shouldn't the alpha code be last in the color? #00ff001C. Regards Lizelight 

  13. Zain

    • 2019/4/11

    I would say that it is really a bug in Chrome (I am using 24.0.1312.57 m).

    The issue is not really on images 1 + 3, I have seen it on image number 2.

    I think that the issue arises when you have the width of the image being a fraction (say 146.71 px). In stationary display, this gets rounded to 146 px. In the transition this gets rounded upwards (more correctly !) to 147 px.

  14. Martino

    • 2020/8/28

    For instance, the older versions of Firefox browser use the -moz- prefix, the Chrome browser use the -webkit- prefix, and the Safari browser use either the -khtml- or the -webkit- prefix. CSS3 Opacity/Transparency Example

  15. Reginald

    • 2021/3/25

    Cristian Ionescu explores some different ways to get opaque and transparent effects using HTML and CSS. The opacity property in CSS 

  16. Wesson

    • 2015/4/15

    The Opacity on my toastr message is like half opacity on my mobile phone. I tried to add this code below, but it still is showing half. Do I need to add something else for a mobile phone or? .toast

  17. Lennox

    • 2018/7/26

    I suggest using jQuery to handle your opacity rather than using the CSS3 attributes because you are correct in that your max-width is messing, unhappily, with your transitions.

    $(".gallery-icon img").hover(function(){
        $(this).fadeTo(fast, 0.7);
    }, function(){
        $(this).fadeTo(fast, 1.0);

    Using jQuery will fix a lot of these little glitches with transitions and make sure your opacity change is done cross-browser-compatibly (yes, I know that there are lots of tags for transitions for browsers, but there aren't attributes for all browsers.) :) Hope that helps!

  18. Calvin

    • 2018/2/27

    Alpha(Opacity=50)"; /* This works in IE 8 & 9 too */ /* but also 5, 6, 7 */ filter: the opacity on the inner div back up, and set the background-color to transparent:

  19. Rizzi

    • 2015/6/26

    The first CSS block is similar to the code in Example 1. In addition, we have added what should happen when a user hovers over one of the images. In this case we want the image to NOT be transparent when the user hovers over it. The CSS for this is opacity:1;. When the mouse pointer moves away from the image, the image will be transparent again. An example of reversed hover effect:

  20. Andres

    • 2017/7/29

    Samsung Internet. 4 - 12.0 : Supported 1 In Internet Explorer 8 and 9, there is a bug where a computed background-color of transparent causes click events to not get fired on overlaid elements. Support data for this CSS color-adjust. - WD.

  21. Fiore

    • 2017/6/23

    .selector { color: #fff; /* white */ color: rgba(255, 255, 255, 0.5); /* 50% opacity white */ } So, as CSS rules are interpreted from top to bottom, modern browsers will set the color to transparent white. Old browsers won't be able to apply that rule since they don't support RGBA colors, so #fff will prevail.

  22. Leroy

    • 2017/7/1

    Cross Browser Compatible Solution Of Using RGBA For Opacity​​ Microsoft Internet explorer (IE6-IE8) had its own own gradient and filter properties which is slightly different to RGBA. It rather uses 8-character HEX value called 'ARGB' (alpha RGB) to define colors with a transparency value.

  23. Crew

    • 2017/5/2

    I'm using CSS to indicate the trigger text for a jQuery slide-down section: i.e. when you hover over the trigger text the cursor changes to a pointer and the opacity of the trigger text is reduced to indicate that the text has a click action. This works fine in Firefox and Chrome, but in IE8 the opacity doesn't change.

  24. Sanchez

    • 2020/7/31

    .cross-browser-opacity {. /* Modern Browsers */ opacity: 0.7;. /* IE 8 */ -ms-filter: "​progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";. /* IE 5-7 */ filter: 

  25. Kiaan

    • 2019/9/25

    You should see white page (If you see the red box, refresh the page, at fist the issue might not happen) The issue is that the opacity of the red body set to 1 when the page is ready, but Safari fails to apply it.

  26. Elliot

    • 2018/10/24

    CSS: div{ width:100px; height: 100px; background: blue css opacity not working in IE. Ask Question Asked 7 years, 11 months ago. Active 3 years, 2 months ago.

  27. Ferretti

    • 2017/7/1

    The opacity CSS property specifies the transparency of an element. Cross Browser Opacity. Opacity is now a part of the CSS3 specifications, but it was present for a long time. However, older browsers have different ways of controlling the opacity or transparency. CSS Opacity in Firefox, Safari, Chrome, Opera and IE9. Here is the most up to date syntax for CSS opacity in all current browsers.

  28. Trace

    • 2018/11/15

    The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the 

  29. Ben

    • 2017/4/4

    When you use this css property filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=50); It is throwing an error, can you include a fix

  30. Bradley

    • 2020/2/25

    The opacity property in CSS specifies how transparent an element is. that this modern property will not work properly in browser versions.

  31. Darren

    • 2018/7/22

    The opacity CSS property sets the opacity of an element. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency. Opacity is the degree to which content behind an element is hidden, and is the opposite of transparency.

  32. Keanu

    • 2018/4/16

    Different Display of CSS opacity in Safari Browser, I'm working on a hybrid css opacity not working in IE, opacity does not work on pseudo objects in IE 10,9,8.

  33. Colton

    • 2015/2/24

    You just use the opacity property, like this: .thing { opacity: 0.5;} 0 is totally transparent (will not be visible at all, like visibility: hidden;) and 1 is totally opaque (default). Anything in between is partially transparent. For historical reasons, this is how is we used to do it:

  34. Jackson

    • 2016/10/29

    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70) : filter « IE Firefox « HTML / CSS.

  35. Bryson

    • 2019/2/22

    Opacity is the same, but regardless, Safari should ignore that since it's IE proprietary. The png is the same file. In fact, I don't even use a background color, so the only background mentioned in the CSS is the image itself.

  36. Mauricio

    • 2018/11/7

    display: none lets the element disappear. Just like it isn't present. This means your layout may change. opacity: 0 this one just makes your 

  37. Kian

    • 2018/10/13

    JavaScript is the most common method of enabling cross-browser CSS3 features support, and it can either be used as a substitute for or to enable CSS3 properties in older browsers or be used as an alternative. Modernizr. A useful JavaScript tool for implementing CSS3 fallbacks is Modernizr. For anyone working with CSS3 in a production environment (as opposed to merely as a proof of concept), it is essential.

  38. Bardhi

    • 2018/4/20

    I was having a problem where adding a basic css opacity on an element wouldn't work when viewing in iOS. Looked fine on desktop. I didn't 

  39. Romano

    • 2017/10/15

    The recent trend of games getting cross-platform support seems like a natural fit for Stardew Valley. Here's everything we know about cross-platform support.

  40. Cade

    • 2016/6/7

    "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.

  41. Rocky

    • 2018/4/13

    Michelle Bretz and Dear Garcia-Stubbs, both childcare providers by day, search Dahl Playfield in the Roosevelt neighborhood during 'Count Us In', King County's annual survey of people experiencing

  42. Jakari

    • 2017/11/28

    This is a LambdaTest Experiment on CSS opacity for background color where we will learn how to fix the browser compatibility Safari 1.x Pre webkit */ However, note that this polyfill will not work for inline CSS style rules.

  43. Dominick

    • 2017/7/24

    the -moz-opacity selector is for way old versions of the Mozilla browser (Netscape). This still works and is necessary for those browsers. the -khtml-opacity selector is a little stranger. I originally picked it up when working with JonDesign’s SmoothGallery for the first time, where he uses it for a few rollover transparencies.

  44. Dylan

    • 2018/6/2

    .transparent_class { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.​Alpha(Opacity=50)"; /* IE 5-7 */ filter: alpha(opacity=50); /* Netscape */ -moz-​opacity: 

  45. Rizzi

    • 2016/12/11

    CSS opacity animation safari bug? Ask Question Asked 8 years, 6 months ago. Active 8 years, 5 months ago. Viewed 6k times 3. I have a simple animation (only for

Comments are closed.

More Posts