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
});
Related
I am using Wordpress and WPbakery. I have set a full-width, full-height background. But currently the background-position is set to centred with '!important' assigned as I see in the developer tools.
I want to set it to 'top'. I edited in developer tools in chrome and I achieved the desired effect. However I'm not sure how to make the changes permanent. I have tried copy pasting what I saw in the developer tools into the custom css field and editing it to 'top' but it wont override the theme. How do i go about it?
This is the current code seen in developer tools:
.vc_custom_1551104319445 {
background-image: url(https://unlicensedshrink.com/wp-content/uploads/2019/02/ulweb.jpg?id=9) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
Not sure in which order custom styles and the default CSS of the theme are output … try increasing the specificity of your selector, f.e. like html .vc_custom_1551104319445 or .vc_custom_1551104319445.vc_custom_1551104319445
When multiple CSS rules apply to an element and try to specify values for the same properties, it becomes a matter of specificity, which one “wins”.
Here are a few resources on that topic:
https://www.smashingmagazine.com/2007/07/css-specificity-things-you-should-know/
https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
https://specificity.keegan.st/
So if you try to overwrite something using the exact same selector you took from the WP/themes styles, it becomes simply a matter of order. Do the WP styles get embedded last? Then they win, otherwise yours would.
A simple way around that, is to increase the specificity of your selector. Selecting elements of this class on the additional “condition” that are descendants of the html element is one way to do that. Or to repeat the class name, so that .foobar becomes .foobar.foobar … and lots of other possible ways.
You need to see which file is producing the code. For instance -
After you know which file is responsible for the code, then you go to the site directory and implement the file in question.
I wouldn't suggest using the vc_ number selector. Best to use or even better add a custom selector on the row or element itself and then apply the following CSS.
.has-bgimg-right.vc_row-has-fill{
background-position:center right !important;
}
What ends up happening if you use the vc_ number selector is if you or your client go to update that field the vc number will change and you will be shaking your head. So create a custom selector class and use the vc_row-has-fill which will never change.
I was trying to make a "multi-row" sprite CSS animation (insipred by this: http://codepen.io/simurai/pen/vmhuJ), only to find that Firefox doesn't support background-position-x or -y.
The lack of -x/-y is discussed at length here: https://bugzilla.mozilla.org/show_bug.cgi?id=550426, and a proposed solution (background-position-y doesn't work in Firefox (via CSS)?) is to use CSS variables, which were recently introduced in Firefox.
However, it doesn't look like updating CSS variables from animation #keyframes is supported?
...
background-position: var(--bgX) var(--bgY);
...
/*Here, CSS variables don't work:*/
#keyframes move-y {
from {
--bgY: 0px;
}
to {
--bgY: -670px;
}
}
Here is a JSFiddle (note: Firefox only): http://jsfiddle.net/phoj0kq5/
I added flickering borders to the animation just to make sure it's running, but the crab doesn't snap its fingers.. Am I using CSS variables wrong, or do they simply not support animation?
Edit
Updated fiddle which actually works in Chrome (still not in Firefox): http://jsfiddle.net/phoj0kq5/1/
This is not a solution, but a workaround that should help:
Since you cannot show a part of the image dynamically when cols and rows are changing one at a time, try using only one column or row of image parts.
When only one line of sub-images is used, you should be able to set the viewed part with background-position: X 0; while X is your offset per image. You will need to edit the image file you are showing to achieve this.
So change the layout of subimages in the image file form:
☺☺☺☺
☺☺☺☺
☺☺☺☺
to:
☺☺☺☺☺☺☺☺☺☺☺☺
As i said, this is not a solution to the problem itself and rather a workaround, but it should work fine on all browsers. However, Mozilla should implement the -x/-y attributes or fix the CSS-variable issue in animations. Until then, i don't see a proper solution for this.
It seems like overriding text colors (blue in this case) aren't being used/recognized until a user either hovers over the text or resizes the window.
I thought I fixed this situation by changed the transition property so it's set on hover/active like so:
.grey-tab {
.transition(none);
&:hover, &.active {
.transition(all .2s ease);
}
}
But, after lots of clicking, it's still broken. In the past, I have used a terrible solution to fix the issue, by applying a delayed CSS3 transform to the text, which triggers a redraw. But I'd like to fix the real problem, as this keeps popping up in Angular projects.
Twitter conversation regarding issue:
https://twitter.com/KMuncie/status/573583334703521793
Thanks for any help you can offer!
Chrome v41.0.2272.101
It seems that using ng-href alone is the issue. There's 2 solutions to this rendering issue:
Use ng-href with a blank href="#" or...
Use only href (which is against ng conventions)
Unfortunately Nish's href="#" solution didn't work for me, and I don't want to use href, nor the display-hack keyframe.
My <a> tags were black in Safari, instead of grey. Using a <span> tag inside the <a> fixed the issue for me.
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.
WebKit just kept annoying me very much: upon page load it would animate a transition from the initial , browser-default, value. I had something like
a:link {
color: black;
-webkit-transition: color 1s;
}
but it would fade in from color: blue! Other properties weren't affected by the FOUC, only the transitions.
Unfortunately it is super hard to reproduce, I couldn't manage to jsfiddle it. My (admittedly edge) case is setup like so:
a "dev" version: a bunch of <script />s and <style type="text/less" />s
a production version: scripts and styles H5BP-style concat'ed & minified (first lessced, respectively)
the FOUC would only show up in situation 2, but that stopped after I inlined the #imports of some stylesheets with #font-faces. A workaround, but it
So I guess this must have something to with load times/order?
Anybody ever encountered something like this? (I guess not.)
At the very least, maybe someday somebody will run into this problem, and find this useful.
If I had to guess, I'd say it's because you've put your transition before your color. By doing it that way, you've assigned the transition while the link is the default color (blue), then told it to change color (in theory).
Try putting your transitions last to keep them from transitioning from the browser default values.