I'm currently redesigning one of my sites. I using the CSS blur filter:
.blur {
blur(5px);
-webkit-filter: blur(5px);
}
and some CSS animation
.animate-blur {
transition: 0.45s all ease-out;
}
to animate the turn on and off these blur styles.
The turning is done by this script:
jQuery(function(){
jQuery("article").hover(function(){
jQuery("article").not(this).addClass("blur");
},function(){
jQuery("article").removeClass("blur");
})
jQuery(".sitename").hover(function(){
jQuery("article").addClass("blur");
jQuery("#background-top,#background-bottom").removeClass("blur");
},function(){
jQuery("article").removeClass("blur");
jQuery("#background-top,#background-bottom").addClass("blur");
})
});
That worked all well until I upgraded to Mavericks and the new Safari. Now sometimes the articles completely disappear or there is a strange shadow behind the text.
So my question is. (Can you reproduce this? And...) Does anybody know if I can fix this?
As StopLogic mentioned, the will-change CSS property fixes this bug. Use will-change: filter on the blurred element.
In addition to the solutions proposed by the author, the css property "will-change" can help you. It allows you to attract additional system resources to play the animation.
I resolved my problem, although I'm not quite sure how I did. I made some changes to the mark up (I'm not sure which of these solved the problem):
no longer using the bootstrap grid, now no position style is applied to the parent div
added overflow: hidden; to the parent div
removed a clearfix out of the affected divs
floating the sidebar (even I don't think this is relevant)
...in the hope this will probably help somebody.
Related
I'm building a site locally (so I can't show it here) that has elements that apply mix-blend-mode: screen; when hovered on. They're images within slides in a slideshow that I'm using Slick for. When I implement Slick to run the slides, the blend mode stops applying when hovering over the elements. From what I found last night, this is a common issue with Slick.
https://community.shopify.com/c/Technical-Q-A/Mix-blend-mode-breaks-after-scolling-Brooklyn-theme/td-p/593470
The person in the above link seems to have the same issue, but the proposed solution didn't work for me because I'm not using the slick theme, and therefore not using theme.scss.
It seems as though transform: inherit !important; might be the solution, but I'm not sure how to implement it as I don't understand how the transform is being overridden by Slick.
css 3d transforms break mix blend mode, fortunately slick still runs ok without it
but you need to add this to your CSS
.slick-slider .slick-track,
.slick-slider .slick-list {
transform: inherit !important;
}
and the no-transform rule to the js initializer
$(".slider").slick({
useTransform: false
});
I faced the issue with low fps while using backdrop-filter and transition on the same component.
.modal-background {
// some styles
backdrop-filter: blur(2px)
transition: all .15s linear
}
As simple as that. The animation is glitchy :( But if I comment out backdrop-filter line, things are getting better.
You can achieve a different but comparable effect by instead animating the backdrop-filter's opacity() like so:
.bg {
transition: backdrop-filter 0.2s;
backdrop-filter: blur(4px) opacity(0);
}
.bg.show {
backdrop-filter: blur(4px) opacity(1);
}
I have seen some minor graphical glitches when doing this in Chromium. But on the plus side, I've also found this approach to be much more performant than the alternative suggestion of animating a (non-backdrop) filter property's blur(). There's a trade-off to be made between responsiveness and graphical accuracy.
I believe, it's a very new property and can't be animated properly yet. You can always restructure something to make work this one instead: filter: blur(7px);
As Roman mentions
its a very new property. Until it got optimized, you have to look for alternatives. More specifically on "filter: blur(6px)":
<div id="root"/>
<div id="modal"/>
If you are trying to apply a backdrop on modal, don't. Go put some listeners on parent (#root) element checks if it has that child modal, apply filter on "#root" and enjoy.
I'm trying to get a smart looking modal popup by using a blur filter e.g. -webkit-filter: blur(10px);. This works great when I apply the blur to a specific element like this:
body.modal_open #main { -webkit-filter: blur(10px); }
However, if my modal popup is within #main, the filter is applied to that element too, as you'd expect.
My question is, would there be a way to tell the browser not to apply the filter to a specific element? I tried to add:
body.modal_open .modal_window { -webkit-filter: blur(0px); }
But that didn't work. Is there a way to do this based on the z-index of an element, or something similar? I can't find any CSS to select elements based on z-index, so I'm guessing that's not possible.
Is the only option to bring all the modal windows out of the #main container? Or are there any more ideas out there?
Many thanks in advance!
For anybody looking for an answer to this, I never found a way to use z-index or anything similar to apply the filter: blur to specific layers. However, by using backdrop filter:
-webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
I managed to achieve the desired effect. Note that this method is only supported in Safari and Chrome at the moment, but hopefully more browsers will support this in the coming months and years, because it looks pretty great!
The setup
I have a series of overlapping CSS hexagons created using pseudo elements with borders. I have hover styles to change the colour of the shapes.
The issue
This hover style is causing problems when the transparent part of the shape overlaps text in other elements, causing a visible corner cut out in the text.
As the problem is difficult to explain with words alone, here is a screenshot highlighting the glitch.
The behaviour
I believe this to be a webkit only issue as it appears in Chrome but not Firefox. It may be of note that I am testing this on a Linux Mint system.
The issue occurs when you hover over the small github hexagon and remains when you exit the hex. The issue is resolved only when the large logo hexagon is hovered over. Strangely, if you hover from the logo hex to the github hex the issue only occurs when you exit the github hex.
I have put together a simplified fiddle to demonstrate the issue: http://jsfiddle.net/chicgeek/JRAn5/
The code
I am using SASS, compass, and custom mixins. I've included a snippet of the compiled styles for the offending hex. For a fuller excerpt, see the fiddle above.
.social.github {
top:1.96875em;
left:2.0625em;
display:inline-block;
text-align:center;
width:0;
line-height:0;
}
.social.github:before, .social.github:after {
position:absolute;
left:-1em;
width:1em;
border:0 solid transparent;
border-width:0.866em 0.5em;
content:'';
z-index:-1
}
.social.github:before {
border-bottom-color:#c3c3c3;
border-top:0;
bottom:0;
}
.social.github:after {
border-top-color:#c3c3c3;
border-bottom:0;
top:0;
}
.social.github:hover:before {
border-bottom-color:#675e5e;
}
.social.github:hover:after {
border-top-color:#675e5e;
}
Note: For the fiddle I am importing from Google Fonts, though for my project I have a custom icomoon font. The bug occurs with either source.
The solution..?
Have you encountered this issue before? Do you have a few minutes to play with the fiddle code above? Do you have any suggestions for tactics I could try?
I'm happy to provide more code if it's helpful in diagnosing this problem. Thanks in advance!
Updates
A friend suggested it might be an issue with the font engine. The clipping resolves when the .woff is disabled. [source]
The issue is evident on Chrome 33 (Linux, OSX), Safari (OSX) as well as Chrome 31 (Win7). The issue does not occur on Chrome 33 (Win7).
I asked some work colleagues about my issue. One of them suggested applying -webkit-backface-visibility: hidden; on the logo elements. Voodoo, it worked.
Here is the revised fiddle showing the fix:
http://jsfiddle.net/chicgeek/JRAn5/8/
Now the thing is, this shouldn't work as -webkit-backface-visibility is a property specifically for 3D transforms. Though I don't know the specific cause of the issue, I believe my problem to be a webkit-specific bug and it is just chance that this property solves it. If anyone has better understanding of either the reason for the bug or the reason that this solution works, please comment on this answer.
I have a problem with this website: http://paulverhaeghe.psychoanalysis.be
In every browser the menu displays as expected, but the menu is not visible in ie8 on WindowsXP. I have already changed z-index but no difference.
I've looked a thousand times, but can't find anything. Maybe you have a more clear vision.
Every help is welcome!
Thanks in advance.
Greetings,
Tim
Ok, I solved it. Really stupid. One of my divs was placed in an other style-sheet (skin.css used for a javascript carousel) (dreamweaver sometimes uses an other style-sheet when working in designmodus). Probably ie8 didn't pick this line of code up: "display: block; position: absolute;". Another example of the importance of "clean coding" :).
Douglas, thanks for your help!
I think I may have an idea after viewing in a few different browsers.
I noticed in your css that you used 'opacity'. This is not a cross browser solution.
IE compatibility note
If you want opacity to work in all IE versions, the order should be:
.opaque {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first!
filter: alpha(opacity=50); // second!
}
From: http://www.quirksmode.org/css/opacity.html
some other things to try also:
.opaque1 { // for all other browsers
opacity: .5;
}
.opaque2 { // for IE5-7
filter: alpha(opacity=50);
}
.opaque3 { // for IE8
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}