I faced really strange problem. FiroFox in production are messing with css, in Edge, Chrome and Safari everything works just fine except in Firefox. On first load after clearing cashe all css seems deactivated and html elements stands in random places. Examples below to show the results
How it looks on firs load in FireFox :
enter image description here
How it should look like
enter image description here
React JSX, that's how the html structure looks like. enter image description here
Just remember in other browsers it works like a charm.
PS. It only happens in live production, working on localhost in Firefox it works just fine.
Related
Setup:
nextjs v12.1
safari v13.1.2
node v14.19 (can adjust with nvm and have tried a few)
The problem is simple, but i cant figure out a solution.
I have multiple <Image /> components in my nextjs project, and they render and work perfectly in Chrome, Firefox, and Brave (havent tried IE)
But safari won't render them. It's weird because at some point, I was making some changes, nothing was helping, I reverted the changes and it rendered the images! i was wondering what i did! I naviated the site and came back to the main page with the images and once more they were not rendering.
Basic usage of the Image component looks like this
<Image
src={'http://walldiskpaper.com/wp-content/uploads/2015/12/Waves-Abstract-Wallpaper.jpg'}
height={240} width={500}
layout={"responsive"}
/>
Again it works fine on firefox and chrome. Here are some screenshots of what i get on sources and network tab of safari
The sources tab shows that safari is unable to load any of the images... i dont know if it has to do with the base64. But I have seen them rendered at some point before i just dont know what is going on and i cant recreate it.
All this is in localhost by the way, i have not tested it online since i have yet to deploy.
Also by the way, this works fine on safari mobile! Im only having the issue in safari desktop
Hey i was also looking for same issue found something
installing package next#canary solve it
I'm using the intlTelInput feature for setting international mobile numbers and it's works well on Firefox. However the CSS on Chrome is very off. See the image below.
How do I get the CSS in the intlTelInput.css file to work consistently on all browsers?
It turned out that my CSS path query string value has '>v=3' instead of '?v=3'
It's working fine now.
After spending a while creating an online portfolio, then uploading it, I noticed an issue with one of my sections. On the "Advertisement" section, I noticed it was not displaying the information, just the title. So, I kept on re-pushing the stylesheet.css, even editing it, and it would still look the same. The HTML, CSS, and JS is working how I wrote it. But it is just the section that is not showing. After browsing online and on stackoverflow for an answer, I believe it has to do with Firefox. When using Firebug, I noticed the section's background has been removed, causing the entire section to "disappear." It works just fine on Chrome. I'm not worried about IE, I know that browser has some issues in itself. Anyway, would anyone on here have an idea to resolve this issue, if I can? Or even, what could be causing this issue?
Here is my website to see for yourselves. www.voelkerdesigner.com
Cheers!
It is the opposite for me your entire site works in firefox for me but not in chrome, looking through your code, its being caused by your naming conventions. Namely #advertise
I use the adguard extension in chrome and below is the css it plugs into my html pages to hide ads, so im guessing your using an adblocker in firefox
#adsense_top, #adsensewide, #adspace, #adspace_top, #adspot-300x250-pos-1, #adspot-300x250-pos-2, #adswidget1-quick-adsense, #adswidget2-quick-adsense, #adtext, #adtop, #adv-masthead, #adv-top, #advert1, #advert2, #advertbox3, #advertise, #advertisement1, #advertisetop, #advertising-container, #advertising_wrapper {
display: none!important;
}
Might as well post a random answer on this... As i wont visit posted links by new users.. i'm just gonna guess that your background image might not be 100%...
In general i use background-image instead of background.. Short hand can be a little pain and breaks in some browsers if not perfect.
so i would compare against the following example
background-image:url('images/mybg.jpg');
background-image:url('http://somesite.com/images/mybg.jpg');
Basically alot of people do not use the url and just go straight for a file name or dont quote it.. And have seen that be the problem in the past, so do use the url('') method.
Otherwise if it still fails to work and you know the image is absolute, you would then have some other css that is either over riding your elements background or is preventing it from loading.
Another trick is using your console / inspect element to manually inject the background-image and see if that works... So once the page has loaded in chrome, inspect the element as normal.. And double click on your css property listing as you can add your own styles this way and if it fails, then its not the markup but something else.
I'm doing a website for a client and for some strange reason when loading the page in IE/Firefox/Opera, the stylesheet doesn't load properly.
When loading the site in WebKit (Chrome, Safari, Mobile Chrome, Mobile Safari) the page loads fine.
I've check that the doctype is fine, the links don't have any typos, they all link up correctly in the source.
I cant for the life of me figure out why it doesn't work!
Please help!
http://almostinspired.net
and
http://almostinspired.net/wp-content/themes/almostinspired/style.css
What's happening is that your CSS file is, in fact, being loaded by every browser, but is only being partially processed by some browsers. This might be because of an improperly formatted stylesheet.
I've determined that these browsers reach line 115, but don't quite make it to 161. I'd try removing selectors in between there until you determine which one is causing problems.
And this is what I did to figure this out:
I opened up your site in Firefox and went to 'Inspect Element.' It was clear to me that the most obvious thing that was getting messed up was your #wrapper div. This thing was styled at around line 160 in your stylesheet, which gave me a line number that it wasn't getting to. I looked around on different elements to find the lowest number it was getting to, and the lowest I found was 115. And that's what I used to infer this solution.
Can you guys point out what I am doing wrong on with the navigation on this site? It works fine on webkit, but not firefox!
http://datatables.dyndns-web.com/
vs intended
The NAV-tag isn't a block-element by default in current versions of Presto, Trident and Gecko. Only WebKit has a default stylesheet for HTML5-elements included already. You should use a basic-/reset-CSS to format all HTML5-elements.
See: http://html5doctor.com/html-5-reset-stylesheet/
BTW, if someones asking for an image, you should upload an image of the desired result, not one of the broken view…