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
Related
I am using CSS "backdrop-filter: blur" on a <ul> element, to create blurry background. However, on my PC the blur doesn't look as it should.
This is the expected behavior from a design template.
This is what i get on PC with "backdrop-filter: blur(15px). The text also gets a little bit blurred.
This is what i get with blur(30px). The text isn't blurred anymore, but the background looks even worse.
I've tried to open the webpage on my phone, and the filter works fine - the background is evenly blurred as in the design template, the text also appears correct. On my PC i've tried to open it with Chrome (Version 104.0.5112.81) and Opera, and it looks identically bad. I'm also using Windows 7 and didn't get updates in a long time (it's not supported anymore) - could this be the problem?
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.
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.
I'm banging my head against a wall with a coding problem. I've developed a website with a large background image to allow scrollable content.
The page appears fine on most browsers, but on the ipad/safari, this browser presents the full background image in the viewable area, not just the native resoltion of the background image as per the ther main borwsers.
It's important I keep the image background and allow it to scroll down as some pages on this site will be lengthy. Any ideas would be much apporeicated!
Thanks in advance!
Preview of layout page: http://websiteworkpreview.com/test/index_test.html
The homepage is index.html (for reference) - Homepage uses different bg image. No problems there...!
Error screnshot of background in Safari on iPad: http://websiteworkpreview.com/test/2.JPG
Mobile Safari has had some issues with image filesize, and some known limitations. Take a look at the discussion in the link below. It shows an example that looks very similar to yours, where the image is being cropped vertically, and some specs as to the limitations. Even though it is referencing using an iPhone, it would, of course, affect an iPad as well, as both use Mobile Safari.
http://www.defusion.org.uk/archives/2010/02/19/shrinking-large-background-image-bug-in-iphone-safari/
MAJOR UPDATE:
I have a PNG fix working on the site. When I remove the PNG fix the red cross and border disapear. What's odd is that the problem only seems to do it with this particular image. There are other Alpha Blended PNG's on the same page that render fine.
The image is not broken (you can see it) nor is it a link. But IE6 and 7 both put a box around it and a red cross on it. It also strips the styling.
UPDATE: The image is NOT a background image, and the image is definitely not broken. You can actually see the image, works fine in Safari, Firefox, Chrome and Opera.
It's a plain old regular image tag
<div class='container'>
<img src='../images/leader_concierge.png' class='page_leader' width="917" height="257" />
</div>
here's the css
.page_leader { margin: 10px 0; }
and here's the exact same thing in safari
You are missing the replacement gif.
All PNG fix methods require that a transparent gif be available to replace the png image, it's part of how the substitution works. If that gif is missing, then you get this broken image appearance even tho the PNG draws fine.
In the case of iepngfix.htc, it expects the file to be at /images/spacer.gif
In firefox with the Web Developer Toolbar you can view broken images. In firefox the image would still be broken but you wont see anything like IE6 and IE7 show.
Note, that in xhtml (well, you closed the img tag) you should use " instead of '.
If you are using iepngfix.htc you need to open it up and set the blank image path. The image needs to be a 1x1 .gif.
Looks like I was just barely beaten to the punch.
Yes, I had the same problem, and it was also with iepngfix.htc which allows transparency in IE6.
Yes, the required accompanying gif image was on the images folder, as instructed.
So I went into the htc file and entered the exact link and now everything works perfectly!
Firefox and 'the other browsers' handle broken images more elegantly, but the image almost certainly is broken - they just aren't rendering it. Perhaps try to get in the habit of regularly checking your site logs for 404s, as it's not always obvious that you have a broken image in a contemporary browser.
Edit: Given your recent discovery, perhaps open the pngs in question in something like TweakPng - you may find that there are chunks causing this behaviour that you can safely remove. Compare the effected pngs with pngs that work properly and remove the offending chunks.