I have a website with several "background-image: url('');" css rules. All works perfectly on Chrome and Safari but on Firefox some of these images don't load the image, just the correct size(randomly).
I refresh (cleaning the cache) and some of them loads and some not, always different. Checking the network traffic all loads without problems (200) but looking at the images in the inspector it appears with correct size but empty.
I found that if I switch to another browser tab and back, all is loaded correctly. Scrolling doesn't make any new image loads, changing the source of the background image neither, some CSS changes make some image loads, like switching position absolute-relative. Happening with jpg and png images.
Firefox 68.0.2
Firefox Developer edition 69.0.b12-13
Have been trying things for hours but no luck.
Thank you very much for any help to debug the issue in advance.
Related
I've got a bit of an issue with SVG files now. I'm trying to make the logo on my site set to an SVG, and now that it's live, my friends can see it (mobile browsers, safari) but I'm on Iridium (Chrome) and don't see it. I've tried Chrome on mobile, I've tried Brave (which I believe is also based on Chrome) and neither have worked. IE and Firefox (Quantum) do display the file with no issues, but only part of it displays on any chrome-based browser.
Here's a screenshot of what I see on chrome:
https://i.gyazo.com/8912785d57756c5cda09c941f4fa3542.png
Here's a screenshot of what I should see (Firefox):
https://i.gyazo.com/57272d67a4406243f6ea1aeeb89d7138.png
Some extra details.
-The text part is an image, and so is the girl. The rectangle that does show in Chrome is an actual rectangle. Like, it was the shape path when exported from Photoshop.
-When I open the image in chrome (just the image, not embedded on the site) it shows up fine. I can play with dimensions, do whatever and everything works perfectly.
-The SVG size is all 100% everywhere, and the parent div is the size I need it to be, so that's not the problem. I'm not that new to embedding SVGs I use a number of them on the site as well.
-There's no error in the browser console, not that I'm sure it would make one either way.
EDIT: Included code:
https://hastebin.com/fugodijiwa.xml
There is a gray border showing around the dropdown image, as seen above. That shouldn't be there. I've seen several other questions which state that this is the case because the src of the image cannot be found or loaded. However, that's not the case here. The element contains a src tag which is set to a 16x16 blank GIF.
The file '/images/system/blank.gif' exists, and can be loaded by Safari. Also shows up fine in the Network panel, as 200 - OK.
However, and here is the reason of the bug I guess... In the elements panel the image shows up as:
I can load this image fine in Safari, opening it in a new tab shows as 16x16 GIF... No idea what's going on here.
Just FYI, this is Safari only. Chrome does not show the gray border around the image.
Note: Changing to a transparent PNG image solves the issue, but I'd like to know the underlying cause.
Tracked down the issue to... uBlock!
uBlock decided that an image in the form of /images/system/blank.gif?v=12345 was an ad and decided to cancel the request. The joy.
This is an issue I noticed in an application that is using icon fonts through all fonts are having issues. Basically the issue is that when I leave the application in a background tab for awhile, sometimes when I come back the fonts get reset to something (most but not all icon fonts show up as squares) and when I move my mouse over the screen, the fonts are switched back to what they should be.
I have made a video to show the issue:
https://vimeo.com/86414508
Any help with this would be greatly appreciated.
It seems to be a known issue in Chrome as it's been answered here :
Icon-font sporadically shows up as squares and back to icon on hover
It's a little annoying but I guess it won't be too much of a problem since they come back when you hover the page again and I'm sure it'll be fixed in the next versions of Chrome.
When checking my website a couple of days ago, everything was OK, but having looked at it this morning in Chrome, the background image and colour applied to the body have just disappeared completely. Safari is also looking pretty bad with the background colour visible and the background image on the body only visible behind other background images!
Things I've tried...
resizing the background image so that it's a lot smaller
removing the image and just having a background colour
viewing the site in incognito mode
Absolutely no difference in the outcome. I've cleared the cache and tried disabling caching but to no avail. Also, the file definitely exists. Not only can I see them being downloaded in the 'Network' tab in the Chrome developer tools, you can see it here: http://charanj.it/assets/images/website-bg.jpg
You can also see the smaller version I tried http://charanj.it/assets/images/website-bg-small.jpg
Weirdly, resizing the browser window in Safari brings the background image in. Another odd thing is that another site I built using almost exactly the same background techniques shows the images just fine, see http://nikeplusphp.org
The CSS has been generated using LESSPHP but I'm sure this isn't the issue as it was working fine before and no changes have been made to the CSS in months.
I have Chrome v19.0.1084.46 m and Safari 5.1.2, Windows 7 but the issue also occurred on my MacBook with the Chrome 19.
Tiny bit more information: Issue happens in a locally run copy of the website too.
Although it seems to be a browser issue, the culprit was the following line of CSS at the top of the stylesheet:
* {
-webkit-backface-visibility: hidden;
}
I tried moving it elsewhere but I still get the same issue. Applying to individual elements seems to work, but as I no longer use any 3D transitions on the site, there's no need for it and removing it has solved the problem.
In my chrome(20.0.1132.11 dev-m) everything is ok.
The problem may be in the extensions (try to disable all) or the most chrome (try to reinstall it)
Update: Same bug on SO and in accordance with the answers to that question, this bug is known and not yet fixed
I checked your website, and the background works, try to clear all navigation data (ctrl+shift+delete select all check-boxes and any time of).
This problem is only happening in Google Chrome on Mac OS X (Chrome 17). I've tested it on all the major browsers on Mac and Windows 7.
Here is the page in question:
http://dealsfortherich.com/drop/
As you can see, I'm loading divs via JQuery AJAX.
The page is always fine on "Refresh."
You can navigate pages with the left and right arrows. The problem happens when you change pages; especially when you change pages when scrolling the page quickly. Try scrolling the page down very fast and hit the right arrow.
The background images that were already loaded via CSS (for example):
.sort_block{ background: url(images/sort_block.png) no-repeat;}
start to disappear. Only background images that are loaded with CSS start disappearing. All are fine. If you open Developer Tools on Chrome inspect the elements, you will see that the browser has the correct syntax and it has already downloaded the image into its cache. For some reason, it's just failing to display it. The CSS display value is correct. In the Inspector, for the div with the missing background, if you modify a value such as "top: 8px;" to "top: 9px;" the image suddenly appears.
This is only happening in Chrome (v. 17) and Chrome Canary (v. 19) for Mac OS X (10.7.3).
Should I report this bug to Google or is there a known work around or fix? I guess I can replace the s with s but I would rather do it correctly and fix this weird issue.
I don't know if this is the same issue, but the root is probably the same: http://code.google.com/p/chromium/issues/detail?id=111218. Based on that report, I don't think there's a known fix yet.
I had the same problem and diagnosed it for hours, but it's not about your code, it's a memory related bug in latest chrome. In my experience it doesn't happen to small images, so a temporary solution would be to decrease the file size (to under 10kB or so).
I have a test file here, showing the difference between a big and a small background image.
http://kolina.fi/chrometest.html
We worked up a solution for this issue until Chromium/Chrome "fixes the glitch" (hi, Milton)...
My colleague, Andrew, posted our solution here:
http://blog.andrewcantino.com/blog/2012/02/15/fixing-the-chrome-background-refresh-bug/
You can see the page in question at:
http://www.mavenlink.com/tour
It sounds like this has worked for others as well, but it's ugly!
I've recently had this issue, and the fix was to use the complete url, rather than a relative path.
E.g. change url(images/image.png)
to
url("http://yoursite.com/images/image.png")
Use :url(.//images path. The .// should solve the problem.