We have a React app that renders financial data; there are slight display differences between what's rendered on my local machine and what's rendered on the central Dev environment. Elements line up just fine in my local:
But are off by a few pixels on Dev:
We use the meyerweb css reset to make sure that we're always starting from a known state.
review the styling in Chrome, the css elements are loaded in a slightly different order, which I'm guessing may be the problem.
This is a CRA app; any suggestions for how to track this down?
EDIT: 2023-02-10 for screenshots
Screenshot of styles for the Date element on localhost
Screenshot of styles for Date element on Dev environment
Related
There is a known bug in Chromium where it can't detect the preferred theme of the system OS, so it always sets it as default (light theme).
An often given "solution" is enable the Chrome flag #enable-force-dark, but it doesn't really solve the problem, the CSS "prefer-color-scheme" media query is always set to light, no matter what you do.
One temporary solution that I think is to force the "prefer-color-scheme" query globally on Chrome. I know that you can force it in the Dev tools at F12 Three dots > More tools > Rendering > Emulate CSS media feature prefers-color-scheme, but it will only be active in the current page context for Developing purposes, so, How can I set the prefer-color-scheme to dark globally?, maybe with a Chrome extension?
So, I have a problem and am not sure where to start. I am working static site project
built using nuxt, vue, and vuetify. Everything works great and looks good, until I run nuxt generate. After that when I go to view the final static site, I lose my styling on my font-awesome icons. The first image below is what I have when running on my localhost.
In the photo, you can see the size of the magnifying glass and star. This is perfect. However, the next photo is after I run nuxt generate
I am at a loss here as to what would be causing this, and any direction would be greatly appreciated.
EDIT
After looking at the devtools again from a comment, the icons have the same CSS styles, and I do not see a difference. However, further back in the elements I have a div that is getting rendered differently, which could be breaking things.
The CSS circled at the top is my local environment. You can see that .evidenceReview{} has the active background, which is overriding .theme--light.v-card{}.
In the bottom circled CSS is what I get from my deployment. Here you can see that the same classes exist, it's just that the presence is switched and .theme--light.v-card{} is overriding .evidenceReview{}.
As workaround, importing the font-awesome css at the top of my css file worked.
#import '#fortawesome/fontawesome-svg-core/styles.css';
Workaround taken from FontAwesome GitHub issue:
https://github.com/FortAwesome/Font-Awesome/issues/18666#issuecomment-1090686913
I am working on a static page that uses React, Gatsby, and styled-components.
When styling a page, my development workflow usually heavily involves Chrome DevTools, tweaking styles there until I have something that I like, and then implementing them in the code.
When using styled-components, however, all of the styles/rules that appear in DevTools for each rendered element are grey, italicized, and disabled. I can override them by adding styles in element.style {}, but that can be a pain, and it doesn't solve the root question which is: why are styles applied by styled-components disabled in DevTools?
Here's a screenshot of what I'm referring to.
It's because styled-components injects styles through the CSSOM API, which the Dev Tools in Chrome (and every other browser AFAIK) can't handle. See this ticket: https://bugs.chromium.org/p/chromium/issues/detail?id=387952
Note that this is only true when styled-components is in production mode, i.e. process.env.NODE_ENV is set to "production". As long as you aren't in production mode, styled-components should generate normal <style> tags, which you can interact with through the Dev Tools.
In v4.1.0 it's possible to provide SC_DISABLE_SPEEDY flag to disable styles injection with CSSOM insertRule.
More details
https://www.styled-components.com/releases#v4.1.0
https://github.com/styled-components/styled-components/pull/2185
I did a full quit of Chrome (Cmd + q), ran npm update, npm install, and did a full relaunch of the browser and localhost server. This fixed it for me.
At a guess, I'd say you might be affected by this bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=796629
If you close the dev tools and reopen them again, this might fix the issue temporarily.
I have an application that I have not changed a line of code in since the last time I ran it. I know this because I was having trouble with some changes I made on another machine and I wanted to make sure the application ran as expected before I updated the code from source control. When I load the page from the same local server in Firefox it displays correctly.
I am using Bootstrap 3 and for some reason Chrome is not loading the css that controls the grid columns. The following css classes appear in Firebug tools:
and are completely absent from Chrome dev tools styles listing resulting the this display in Chrome
instead of the correct display which appears in Firefox
Can anyone think of anything that might cause this?
Here is the html:
and the computed styles:
and here is the complete html as requested
I am compiling several stylesheets into one min stylesheet in a staging environment The styles are applied locally in IE where each stylesheet is separate, but they are not being applied in the staging environment in IE where the stylesheets are compiled into one min stylesheet. I have run the stylesheets through a CSS validator and have gone through each stylesheet and corrected any syntax errors that I found. I don't necessarily need to know how to solve the problem, I mainly want to know where the problem exists. The IE developer tools aren't giving me any feedback related to the problem of styles not being applied.
Here is a link to the login page in the staging environment: https://s-app.joinhere.com/manage/sessions/new. The styles are in the stylesheet, they just aren't being applied in IE. Here's a link to the compiled min stylesheet: https://staging.joinhere.com/assets/manage-d4f70cefc93b170b5f2a04509db697c8.css
Thanks!
I tried your page, and it works fine in Chrome. However it looks weird in IE9, as if the CSS styles are not being applied, just as you described. For example, the style body#manage-sessions #main_container #login_container is not getting applied. I looked at the css tab in the developer tools, and it turns out the style is not even there, which explains how it is not working. To find out why, I used the networks inspector from the developer tool and examined the response when IE9 is downloading the css, and the style body#manage-sessions #main_container #login_container is indeed in the response. This lead me to believe that there must be some limit on the max css file size for IE. It appears that this is indeed the case as described here. Apparently IE simply ignores additional styles if the css file gets past a certain size. So this explains why everything works when the css files are separate, and why things fall apart after you combine them. To solve the problem try splitting up your large css file into 2 or more smaller ones that fall under the IE limit, and see if this corrects the problem.
I'm not sure about your personal setup, however, anything < IE 10 can only handle 32 individual stylesheets, anything after will still show up in the Dev tools like its working but rest assured, the 33 stylesheet is committed to a life of silent failure.