This site http://gaudetelectricllc.com is displayed differently in Chrome depending on the computer or phone used.
On most in Chrome and, apparently all, in FF, Edge, Opera, a background image and text/button with color ffff00 (yellow) are displayed. On some computers/devices using Chrome (same version), the image is not displayed and the text color is black.
I am attaching a comparative image. The left side shows what some Chrome users see and the right what everyone else sees.
image shows the correct display on right and the problem on the left
I have no ideas about the cause of the problem.
Related
I have an image that has been cropped by rmagick. On Firefox and Chrome, it looks fine but on Safari (12.0.3 running on OSX 10.13.6) there is a black bar along the bottom. Here's two screen shots:
Firefox and Chrome
Safari
It looks like there is some empty space at the bottom of the image and Firefox/Chrome are making it transparent while Safari is making it black. (Forgive me if my terminology is off, I'm not a graphic designer).
I can't show the particular code because it proprietary, but any help understanding how to go about fixing the problem generally would be appreciated.
Alternatively, if you can better help me understand the specific problem, that would be great too.
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.
I was working on a hybrid app project that had a circular tap button implementation in it. For this, I created a circle by adjusting height width and border-radius properties and put a button inside it. However, I noticed that the button was placed close to the top of the circular shape so I decided to expand its clickable area as per this. I only adjusted the bottom property as that was what I was looking for. It worked perfectly on Chrome (Version 48.0.2564.103 (64-bit)) but not on Firefox (Version Firefox ESR 38.6.0). Upon inspecting the element (on both browsers) I could see the ::after tag has the whole circular area covered, but it's not clickable near the bottom region of the circle on Firefox. Any ideas explaining the behaviour would be appreciated. Thanks!
http://site2.ewart.library.ubc.ca/
When I use my IE 7 or IE 8 to visit this page, the text below the carousel image is aligned to the right, until I manually navigate images through clicking the left & right button or the dots.
At the same time, the left & right buttons are placed under the dots, while it should be on the right of the dots.
(this page works properly in FF).
I also got some feedback from folks saying that this page works correctly in their IE 8. So I am totally confused.
Thanks.
(Please see attached screenshot from my IE 8)
Give "wrapper" a size in pixels, not PERCENT, such as width:450px