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
Related
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.
we're stuck at a strange behavior in a clients project:
We have many SCSS files resulting in a compiled CSS file of 240000 characters in size.
I was able to develop in Safari without a problem.
Then a colleague started working on the same project using Chrome - he got a completely unstyled page. In Firefox he got the same problem. I tried it with Chrome and Firefox on the Mac too, and yep - they both won't display the page anymore.
"Anymore" because it worked fine. The only thing that changed is the SASS compilation workflow to use the Wordpress Plugin "WP-SCSS" instead of Grunt.
Our new compiled CSS seems to be bigger than the previous one. Maybe the underlying Foundation framework was customized, so that it did not include that many rules. Anyway: more rules should not end up in a broken stylesheet like in IE some years ago. Therefore Safari (both v9.1 and "Safari Technology Preview") render fine.
Yes, all browsers are up to date.
Yes, all caches are cleared.
Has anyone an idea, a hint, or a guess?
Days of Internet research and worsening frustration lead me here. I cannot figure this out. Perhaps a wiser person can help.
Using web developer tools, every site page displays fine in every tested browser. However, when I check on an actual iPad and iPhone, no page displays correctly. What's wrong is that none of the CSS in style.css is executing on the iPad / iPhone.
I am using bootstrap, which it sees, but it does not see my style sheet (css/style.css). I have tested too many things to list, including absolute versus relative URLs, and rearranging the link tags in the header.
I tested inline and head-embedded styles and both work. But this is unacceptable to me.
I removed all code from the footer, leaving one div with a class from the external stylesheet, and that did not work. The iPad is blind to it.
I cannot debug the iPad from the iPad (I know Safari has instructions for this), but I have other bootstrap sites I coded that work fine and comparing them I cannot see what I am doing differently now.
I re-booted my iPad many times in case it was a cache issue.
I left out code in this question because I do not know what code to show. I can provide code or URLs or anything else if that helps. The pages are published.
I appreciate any assistance. Thank you.
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'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