i create this page:
http://fortune.beejayjayn.de/
If you open it on windows in any browser, everything is working fine. Every Browser except Safari is fine on Mac.
If you open the page in Safari 6+ (Edit:after some testing it seems to be a problem on Chrome to => seems to be webkit related?) on Mac this happens:
http://imgur.com/a/UBZPU
It seems like every descending style is not working...
I tried to:
remove "-webkit-transform: translate3d(0,0,0);" => not the solution
I just compared a working css with the not working one. Anything that seems fishy?
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've been using Chrome local overrides for a while now, but now I've noticed that chrome started to ignore all my CSS files that have a version after the .css
For example
main-common.css%3fv=21.1.0.29512
doesn't work
but
main-common.css
does
This seems something new that had to happen in the last two weeks. And it's just on my primary device.
Does anyone have any ideas what could the reason be and / or how to fix it.
It seems that it is a problem in the update of chrome (the problem is in all browsers based on chromium) https://bugs.chromium.org/p/chromium/issues/detail?id=1308257&q=devtools%20override&can=2
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.
I was testing some css code in IE11 in Parallels desktop as I often do, using Codekit 2 as server/sass compiler. The Flexbox code was not working as it should.
I looked in the F12 window and it looks like this:
As you can see, all the ms-related flexbox code is marked as invalid and it's trying to use the webkit code, as if the user agent is Safari.
Why would this happen and how can I be sure IE is using it own user agent?
I'm a programmer for an online store so i visit hourly this website. One of my coworkers said to me that for her the website looks awful so i instantly tried on my pc. It worked great but now after 1 day, i updated my chrome too and it looks awful.
I realized the chrome version 28.0.1500.71 m is messing the website. I don't know what exactly but something with the styles. It's like they don't load or something (part of the style is not loading or something because some elements have styles some not... and it's a real mess).
I checked on multiple PCs, different OS's: windows 7 (64 and 32), windows xp (on 3 different pcs) (when i had the older chrome version all worked wonderfully but now, when we all updated it looks very broken)...
I tried on ie 8, 9, 10, firefox, opera, safari and they all work superb, like they have to but, on chrome version 28.0.1500.71, is not.
What can i do? It's not like it's my fault or something but how can i change so it looks right again?
Please visit this page and tell me how do you see it and please verify it with chrome version 28.0.1500.71 and with another browser to see the difference.
LINK REMOVED 2018 :) not needed anymore
Update:
I'll keep you updated on what i do so you don't have to try again but for now i uninstalled google chrome version 28.0.1500.71 m and installed google chrome version 27.0.1453.116 m to be sure this is the problem. What do you think guys? It fixed the problem. But, i want a fix for version 28.0.1500.71 m.
Update 14:44
Ill update chrome back to 28.0.1500.71 m to make screenshots so everyone can see but first i'll make some screenshots in this version i have now (27.0.1453.116 m)
Screenshots
good) chrome 27.0.1453.116 m i.imgur.com/bWfvwdk.jpg
problem) chrome 28.0.1500.71 i.imgur.com/bx6ttRB.jpg
problem) chrome 28.0.1500.71 incognito i.imgur.com/76NUyOn.jpg
good) Latest opera i.imgur.com/gqWd6OT.jpg
good) latest firefox i.imgur.com/ImTVtSI.jpg
good) ie 10 i.imgur.com/FwvZy5j.jpg
good) IE 9 (browser mode IE9) i.imgur.com/74bTmGR.jpg
good) IE8 (browser mode IE8) i.imgur.com/KKqE997.jpg
good) Safari i.imgur.com/qWI0Wos.jpg
SOLUTION
Big big thanks to #Zenith
He sayd that google chrome changed the webkit so i analysed the css and found
#-webkit-keyframes blink {
from {
opacity: 1;
}
to {
opacity: .5;
};
}
I just removed it. Now it works perfectly. Thank you.