CSS class only applied after action happens - css

I have a bit of a (very) weird issue going on. I've been trying to handle it for a while now, and decided to look for other thoughts on trying to fix this.
So, here's what's happening:
I'm developing a React app, using react-router. Every time that a new view is loaded, I use react-addons-transition-group to create a fade animation. And it works fine, overall.
The problem is that there's one view that, if coming from a specific view, will not load it's CSS classes. This is extra weird, since I have all the CSS classes in one single minified file.
The view in question is a carousel, that holds many views. First time it's opened, it has no style applied. However, if I change the carousel slide, all the styles are applied.
The following screen shot will show the state before and after the change of slides:
At this point, I'm completely out of ideas of what can be happening. Have anyone ever faced such issue?
I think I should stress it once more: it only happens when transitioning from one specific view to this specific view. It does not happen anywhere else in the app.
Thanks in advance for your help!

Hard to say without the code but look at div#app.
On the LHS you have <div id="app" class="app login-section />
and on the RHS you have <div id="app" class="app calculator-section gender />
and the styling requires that class as it is
.calculator-section .calclulator-slider .calclulator-entry {
[...]
}

Related

CSS performance issues. Stuttering during class apply

I'm implementing a dark theme on my website using tailwind classes. For example:
<tr className="bg-white dark:bg-dark-blue text-left dark:text-white transition-colors duration-300"></>
And for some reason, whenever I change my theme the transition isn't smooth but laggy and stuttering. I've noticed that with the increase of dark-styled elements on the page, the lag has gotten worse.
I'm not sure if this is actually a tailwind problem or a general CSS performance problem in the browser.
UPDATE
After some test I've come to the conclusion that it actually has nothing to do with transitions but with CSS itself.
I have a lot of elements on the page with dark classes set initially and then whenever I change the theme I just add/remove 'dark' class in <html>. I have may be 50 elements on the page which change their text color and background color and all of them are laggy whenever the theme gets changed. The lag is similar to when you have a memory leak or a loop. It stutters then loads all at once and stuff like that.
So I guess my question is how to optimize CSS performance in this case? or overall?
UPDATE 2
According to Performance page in devtools I'm dropping a lot of frames when changing the theme. And it actually feels like I'm getting 5fps. Here is a screenshot of Performance page prnt.sc/Zz6T88ZFs6Fp. I'm not sure how to read it, may be somebody can give some useful info
If anyone has ever faced/solved this problem, I'd greatly appreciate your advice
It may have to do with the critical rendering path. I'd advice you to read this excellent article : Achieving 60 FPS Animations with CSS3.
In a nutshell, if you have css transitions set other than on transform and opacity css properties, your browser has to recalculate the whole layout, which causes stuttering.
I don't use tailwind and it's hard to test my response without example code but I had a very similar problem several years ago when browsers were a little dumb.
I had many classes for color throughout the html and toggled them with jquery. Here's a quick example of how...
$(".red").removeClass("red").addClass("blue");
I determined that, at the time, the problem was that the items were causing repainting for each change.
What I ended up doing was swapping a class on the body:
<body class="blue">
Whatever
Something else
<!-- lots more -->
</body>
And then:
body.blue a {
color: blue;
}
body.red a {
color: red;
}
And that worked beautifully because, as I understood it, the repaint happened all at once... but I'm guessing to even try you'd have to write a lot of stuff on your own instead of using tailwind. Maybe not, so I hope this line of thinking helps even if using tailwind.
Edit: if I had the same problem and couldn't fix it quickly enough I'd fade the body with a quick opacity out and then back in. Complete hack but it might look cool. Not a solution to your real problem but it might help if you can't fix it.
You can go in the dev tools and then go under "network", then you click on "Disable cache".
After a lot of research I've managed to finally find some useful info.
With the help of this article and some info from here I found out that dropping frames is actually not uncommon but usually it is not as intense as in my case.
There are some particular lines in Profile.json (download from Network page), which can help you find the actual reason(s) of dropped frames. Look for unsupportedProperties.
In my case it was {"args":{"data":{"compositeFailed":8224,"unsupportedProperties":["color"]}},"cat":"blink.animations,devtools.timeline,benchmark,rail","id2":{"local":"0x76c803503df8"},"name":"Animation","ph":"n","pid":40040,"scope":"blink.animations,devtools.timeline,benchmark,rail","tid":13280,"ts":166257565931}. For me the reason was that too many elements on the page change their text color. 884 lines of compositeFailed related to 'color' for one theme switch on my page. Only refactor with the help of https://csstriggers.com/ would be effective in my case.
Currently, I don't know actual reasons for compositeFailed apart from that it has to do with color property and blink animation. Any Google devs would be welcome to enlighten me because I can't really find any info about that.

Blazor ignoring scoped CSS in Components

I have a similar problem as mentioned here.
The component MyComponent.razor has the scoped CSS MyComponent.razor.css.
Anyways, the style of the CSS file SOMETIMES is ignored. If I change the CSS it might work on the first start, or it might happen that I have to build the project 10 times before it works. If I move the Component (including the scoped CSS) from one folder to another and move it back, it is more likely to work as well.
It is also not a caching issue. When I hard refresh the browser and clear the cache, the CSS is still not loaded. In the dev tools, I am also not able to find the specific changes in the bundled CSS. E.g., if in the CSS I simply change the background-color of a class from blue to red, the background-color is still blue in the bundled CSS.
Within my _Host.cshtml the bundled style is added.
<head>
...
<link href="<applicationName>.Client.styles.css" rel="stylesheet" />
</head>
Project.Client.csproj does not contain a
<RazorLangVersion>3.0</RazorLangVersion>
The issue was relatively hard to find, but I found the solution. The problems I faced were caused by the components themselves. Basically, my Pages/Components look something like this:
<MyComponentA></MyComponentA>
<div>
<MyComponentB></MyComponentB>
<MyComponentC class="customCssClass">
<MyComponentD></MyComponentD>
</MyComponentC>
</div>
To make styling work, I need to pass down the style with the ::deep CSS-Keyword. Otherwise, the style is not passed down to the component. This means, my CSS looks something like this:
::deep .customCssClass {
}
Keep in mind, that ::deep needs to be added to every CSS class, otherwise, it doesn't work (at least it didn't for me).
Another issue is that I found that under certain circumstances it still didn't work for some components. I honestly have no idea which part of my code breaks it, but the fix was to wrap the entire Page/Component into a div. My code from above would look something like this then:
<div>
<MyComponentA></MyComponentA>
<div>
<MyComponentB></MyComponentB>
<MyComponentC class="customCssClass">
<MyComponentD></MyComponentD>
</MyComponentC>
</div>
</div>
TLDR: Add ::deep to every CSS element and wrap the page/component into a div.

Animating elements by change class in Angular2+

I need to add some animation to my Angular project, and best way I came up with is just make from classname a variable and switch it in .ts file(if I need to attach style to event for example). So that mean a have two(or more) css style sets to make an animation do what I want...
Questions is:
1) Is it bad in any other way than just a lot of css code? I mean I'm fine with that, just wanna know is other people do the same? Cause its feels a bit like nasty coding...
2) I heard about angular core animation, do I have to use it here?
Thank you!
Assigning classes works really well in angular, I actually prefer using CSS for animation rather than the angular libraries.
To assign classes on certain conditions, you can use the following notation in your template:
<div class="card" [class.card--inactive]="yourCondition">
This will add the class card--inactive to the div whenever yourCondition is true.

css "onclick" pseudo effect issues

Using the exact same CSS,
the onclick pseudo effect works fine with this code on one page of same site:
<a data-url="#" class="btn btn-share referral_button">Button Text</a>
(but admittedly it is on a different page with different divs)
but not on another page, where the code is:
<a data-url="#" class="btn btn-share referral_button" onclick="javascript:$find('ABC').set_activeTabIndex(3);">Button Text</a>
instead of behaving as it should it shrinks when clicked - and sort of reverts to how it would look without any css styled - or at least not the correct css styling
I initially thought it was something to do with the onclick="javascript... stuff somehow clashing/over-riding and affecting the CSS from performing how it should but * EDIT it can't be this because I just removed the whole onclick section and the problem still existed :( **
so it must be something else..
the relevant CSS is here: sorry it's long and probably bloated. the most relevant stuff i believe is at the bottom...
https://docs.google.com/document/d/1N7YQ5YuvY6DJn8-nr4sinx4LY7WOS88eErpRHe4IE_g/pub
Seeing as how its an invalid syntax, I would say remove the " \9" from all of your :active and .active statements
Like below:
.btn.active{background-color:#cccccc \9;}
EDIT: Furthermore, (not really relevant to the answer)
Your CSS is a pretty hot mess. (No offence)
You can easily clean that up and make it a lot more manageable.
Plus, it could just be my tired eyes, but it seams like half of it is just repeating and/or overwriting the other half (which goes back to cleaning it up and making it manageable).
Honestly though, your the one working on it, so its as long as you can read it and use it. To each their own. I prefer my CSS quite readable in a dev environment.
The most obvious suggestion is there is something on this mysterious "Other" page, that is overriding the style.
Use a tool like Firebug for Firefox to inspect the elements and its' styles this may give you a hint as to what is overiding the behaviour you are expecting.
Also check that the CSS is the same on both pages if you are not using a common CSS file.
Read up on CSS Specificity, which is could be the root cause of you problem. This could help explain why style b is overiding style a.
It boils down to some difference on the two pages.

Selecting objects within a class

So, this is a question that's been nagging at me for a long time. I've been digging much more into CSS these days. I'm trying to stay away from jQuery for this project as it's in Drupal and I'm trying to stay away from custom code.
So, we have a class the system applies to BODY called "not-logged-in" when the user isn't logged in. Now this should work well for us (as I understand CSS), as we're only allowing admins to "log in". We are having collisions when we have someone editing a node -- all our custom classes are loaded in both cases and some of the editing controls are looking funky because of it.
So the BODY style is something like this:
<body class="html not-front not-logged-in no-sidebars page-node page-node- page-node-1 node-type-page footer-columns" >
... [much body content here--other divs, other classes, elements with IDs] ...
<div class='mycustomclass'>Should be bigger if logged in</div>
</body>
So, when I try to add a CSS selector and style, like this:
.not-logged-in .mycustomclass {
font-size: 20px;
}
It seems to ignore .mycustomclass. I've run into this before and chalked it up to my poor CSS-fu. And there was always jQuery, so I really didn't have to care. I'd really appreciate it if someone could clear this long-time mystery up for me.
Your syntax is fine, no problems there.
I imagine one of two problems:
The class is not actually being loaded, either on the body, or on your mycustomclass element. Check both in the rendered source (i.e. in the browser), not just your own code. As it's Drupal, it could be caching so your changes are not being loaded. Clear the Drupal cache.
Specificity. Perhaps there is another class on the element, or perhaps there's a global rule. Either way, something could be overriding your CSS on that element.
To solve both, use Firebug and the Web Developer Toolbar in Firefox. Both are essential for doing CSS.
Be sure that Drupal is adding the css script tags in the <head> of your HTML. You should have them follow after your stylesheet references. That's it, the drupal css (the one that is adding the not-logged-in class to the <body>) must execute before your css.

Resources