I'm following a youtube tutorial on a MERN stack project. It uses Chakra UI for the frontend. But I've noticed a weird issue. The app looks perfectly fine on Firefox, but not on Chrome. I have attached the images to show the difference/problem.
While trying to solve the problem, I noticed that the app looks fine in incognito mode on chrome also. I changed the chrome profile to a profile that I don't use often, and the app looks fine on that as well. So, it seems like the problem is with the chrome profile that I use generally. I have also tried disabling the extensions that I have, but it's still not rendering properly. I also tried removing the browser cache, but no success. I don't want to remove the entire data from my profile. Can you please explain what is causing this issue and what might solve it?
The app looks like this on Chrome:
The app looks like this on Firefox:
I'm guessing you're using colorScheme for your buttons and that Chrome is on dark mode and Firebox is on light mode. Colors schemes have different colors for each theme. For more control on which colors are used you can try:
Styling single part components
Style props like below
<Button color="white" bg="blue">Log In</Button>
Related
I have made a website and while I was making it I was viewing it in Firefox to review changes as I was going along and it was all fine. I finished making the website to the design I was following and put it on my domain to find that if you view it in chrome or other certain browsers it brakes the website and you can only view it properly on other certain ones like Firefox.
ones its broken on:
Google Chrome
Microsoft Edge
Opera
ones it all works on:
Firefox
Internet Explorer
(from my findings)
the website url is https://hily.nl if it helps u can try to view it yourself.
this is what it is meant to look like ( what it currently looks like on Firefox ) :
https://imgur.com/a/qXSw1gZ
this is what it looks like when its broken ( what it currently looks like on google chrome ):
https://imgur.com/a/c71tV71
The first suggestion from here where you have the svg wrapped in <object>...</object> and use data as opposed to src worked when inspecting your site on Chrome and changing attributes.
The situation.
I have a site that has a menu strip with some links. On a desktop these links work as expected, on mobile firefox, great! However on webkit, safari and chrome, they don't seem to register when you touch them.
I used Adobe Edge to check it out, but it worked fine in that browser, which browser is that anyways, is that webkit based or other?
I also tried using js to debug, but no luck. I would try to to get an alert() if say the parent element, or the link element itself was touched, I can only seem to get them to register if I mash around a bit.
The site is built on Sitefinity, I have looked around and can't seem to find anything relating to this.
How might I be able to go about trying to figure out what the issue is here? It seems to me to be webkit related, correct me if I a wrong, as it happens on chrome and safari.
On Android devices, you can write messages via console.log('blah!') and read them using logcat. You shuold also see other javascript errors in there.
See:
http://developer.android.com/guide/webapps/debugging.html
Gif images render for a split second, when page is fully loaded then disappear leaving the broken image icon. This happens only in Chrome other browsers it's fine including Safari.
The weird thing is all has been fine and working perfectly for months up until last night.
Chrome's web developer tool reads 'Failed to load resource'.
Any suggestions would be appreciated.
A link to a page is below.
Thanks,
http://www.isenterprises.co.uk/product_info.php?cPath=33_46&products_id=748
(it's the 'Colours Available' colour swatches that don't render properly)
In fact IE doesn't know who "Transfer-Encoding" is. You will have to write:
header('Content-Transfer-Encoding: deflate');
in paps_makethumb.php.
Add:
header('Transfer-Encoding: deflate');
in paps_makethumb.php
Same issue for me, solved by removing Chrome extensions!
Chrome menu Chrome menu > Settings.
Click Extensions.
Check what's in there... I had to uninstall "QR Code generator" previously installed.
Maybe some extensions need to be updated, but i uninstalled them and now Chrome renders well.
I've grown tired of the multitude of issues I seem to hit on a daily basis with Firefox and I'm trying once again to switch to Chrome.
One of the things that frustrates me is the layout of the tabs in the inspector. In firebug they are all along the top so if I want the metrics of an item it's incredibly simple. In Chrome I'm forever scrolling up and down.
Is there anyway to change the way this works? All I want to do is change the layout to something a little similar to Firebug.
Cheers!
The Chrome web inspector is just a web application, so is very customizable. You can download a copy of the devtools HTML/CSS/JS and tell Chrome to use it with a command line flag. Some resources for you:
Running your own devtools frontend
Customizing look and feel of elements tab
Related SO question: Chrome "Developer Tools" element - hide annoying yellow dimensions box
List of Chrome command line flags
The devtools CSS is at chrome-devtools://devtools/devTools.css (copy and paste the address into the address bar).
Override the styles using Custom.css which lives at:
C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets on Windows
~/Library/Google/Chrome/Default/User StyleSheets on OS X
Dev tools are just CSS/JavaScript so you can do whatever you want.
If you watch this video, Paul Irish shows how to run a build of Chrome and point to your own dev tools code. Kind of cool!
I have a big problem with my web site (you can see here), several user can't see images with firefox. I use too firefox but I don't have this problem.
These users use firefox 3.5.2 with windows XP or VISTA. I have no idea to find the problem.
Have you any idea ?
Thanks a lot.
Perhaps the user has accidentally blocked images from your domain.
In Firefox:
Tools > Options > Content tab > Load images automatically should be checked > click Exceptions... make sure the Site list does not include mowen-world.com. If it is there, highlight it and click Remove Site.
I've had similar issues a few weeks ago. The reason was that the JPG images were somehow corrupted. Some browsers/OS combinations showed them without problems, but on others they didn't show.
I fixed it by opening every JPG image and saving them again in a good image editor (like Photoshop or Fireworks)
Whenever I get a problem like this, I start from basics... like "is the HTML valid".
http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fmorwen-world.com%2F
There are some issues listed here that could cause odd behaviour.
When I look at the site, I can see all the images fine and the website looks reasonably well laid out (Firefox 3.0.14 Windows XP AND Internet Explorer 8 Windows XP).
I can't see an issue using Firefox 3.5.3 on Windows Vista, just FYI.
Personally whenever I have issues with assets not loading or markup/CSS behaving weirdly, my first stop is Firebug. The Net panel shows the requests for any images and their respective responses. Certainly a good place to start looking.