I'm using the glyphicons pro library for my website and I noticed that on my MBP Retina, they show up as hi-res on Chrome, but not FF (even though FF says it's up-to-date). Here are a couple of screenshots (first one is FF):
Any idea what's going on?
You might be using a Web accelerator addon in Firefox that could cause this pixelation. Try disabling that plugin and see if it works.
If thats not the case then your Firefox may be running in 256 color mode, for details see Website colors are wrong.
Another possibility - check the properties of the shortcut you use to load Firefox (right-click, then Properties). Under the Compatibility tab, make sure nothing is selected.
or Maybe your screen res changes in FireFox, see this
Related
This image is from Chrome, notice the color of the text-red-900
You can see the example output on the right side, the Aa.
https://tailwindcss.com/docs/text-color
**This image is from Brave Browser, notice the color of the text-red-900 is lighter than most of the other text-red-xxx classes.
Why is this? Both are using my computed system default dark mode.
You can see there is a inline style overriding the CSS color for this element, where is this inline style coming from? and how do I prevent it?
--darkreader-inline-color: #e17d7d;
Note: I have 2 macbook pro Os Monterey M1s. This is only happening on one of them, the other is rendering colorrectly.
I completely uninstalled Brave Browser, including all the files for Brave within the ~/Library folder like Preferences and what not.
Then I reinstalled, and seems to be working without any additional settings.
Is there some setting that would force elements to be lighter in Brave Browser to support Accessibility.
I believe it was some extension called Dark Reader that was brought over from chrome (disabled on chrome, but enabled on Brave) What an annoying extension.
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?
In Firefox 67, one can use media queries to detect user preference on light or dark theme.
In my version of Firefox (under Ubuntu), it seems that my preference is light theme. That is, the following CSS gives a blue background:
#media (prefers-color-scheme: light) {
:root {}
body {
background-color: blue;
}
}
How can I change my Firefox preferences so that prefers-color-scheme: dark
evaluates to true?
I found an add-on that seems to do the trick, but I must be doing something wrong with my own CSS, as it does not work on my page.
Dark Website forcer
Good news -- from Firefox 87 this is now enabled by default, without the need to set a configuration flag! You can find it in the inspector tab:
Choosing the sun button simulates light mode;
Choosing the moon button simulates dark mode;
With no button selected, your operating system default will be used, as per normal.
In some older versions of Firefox, this feature existed behind a flag. To test on one of those versions, you can thus enable this by going to about:config, and setting the devtools.inspector.color-scheme-simulation.enabled property to true. Once that's done, you'll find the controls for it in the same place as in the modern devtools, but as a single paintbrush icon rather than today's sun/moon toggle buttons.
You can update the style used by Firefox by going to about:config and adding a new property ui.systemUsesDarkTheme of integer type with value 1.
It doesn't automatically update the value on active pages in the same way that it does when you're updating OS settings in Windows or Mac, but if you refresh the page after updating it will pick up.
You can confirm the browser setting is correct by viewing the example on mdn
Edit:
On firefox 71 the update is applied to active pages without refresh
Just for the sake of completeness: If everything fails, there is a Firefox add-on called “Dark Website Forcer” (also on GitHub).
It changes the style by reading the CSS of the website and re-applying the parts for the dark version again, if you want to have a dark one. As such, it also can only force a dark website, not the light one. The Readme has a detailed explanation why.
Disclosure: I'm the author of this add-on. 🙂
In the new version of Safari there is a new "Responsive Design Mode". You can switch between Safari, Internet Explorer (7,8,9,10) and Firefox. Is it actually running Windows Internet Explorer 7 if I click it?
On a page with icons it changed the positioning of the icon when I changed to IE 7.
It would be pretty helpful if they would actually emulate IE...
Edit:
The same website, on the left with safari selected and on the right site with IE 7.
Image: http://imgur.com/ZLTlzDQ
Image 2: http://imgur.com/XJIHaL1
In this WWDC 2015 video, it is stated that setting the user agent in the responsive design mode sets the UA string only; nothing more. No emulation or whatsoever. Besides, making IE work on OS X would require both tremendous effort and collaboration of Microsoft and Apple. I don't think it will ever happen, especially not for an extension for a non-profit software.
I know this answer doesn't explain your screenshots but I can not comment more on that without seeing the code, yet my 2 cents would be on the css prefixes. Safari might be ignoring / applying them according to the user-agent and that would explain the difference. IE conditional tags would be another possibility that comes to mind.
I can use FireFox and FireBug, in a pane, I can open a .css file, in real time, as I make edits, I can see those edits reflected in FireFox. This is a very handy and valuable feature.
Without starting a debate over browsers, I would love to be able to do the same thing in Safari. My far too small display on this laptop aside, real time development of css helps me move things along at a very nice pace.
While I am near certain any input manager for Safari would not officially be supported, I am OK with that. I have been playing around with the "Web Inspector", but as far as I can tell, this will not fit the bill for my needs.
Are you doing this on a Mac? You can give CSSEdit a try. It's not free, but has a built in webkit preview
Get the latest version of webkit, it has a much more powerful version of Web Inspector which you can use side by side with the latest Safari (two browsers open) to debug Safari.
Which version of Safari are you using? I'd recommend getting Safari 4 Public Beta, which has a brand new Web Inspector that allows you to edit the DOM real-time (I'm not sure whether you can actually edit a CSS file with it, however).
Steve
You could try installing FirebugLite.