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.
Related
I have a color gradient animated with anime.js. Looks great on Chrome. When I run the site on Safari (mobile or desktop) The same colors are rendered noticibly darker to the point where it is unappealing and nothing like the other browsers. The colors are hex values and safari dev tools say they are being rendered accurately but visually they are way off.
This is an example of a gradient:
`linear-gradient(10deg, #f52828, transparent),linear-gradient(120deg, #Cc33ff, transparent),linear-gradient(240deg, #Ff9933, transparent)``
I don't have any idea what is causing this. Any help is appreciated. Thanks in advance.
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.
I'd like to have a radial gradient background. Since I can not achive the desired look using compass I decided to use an SVG image. The output of:
background: url(/images/background.svg) no-repeat center center fixed
background-size: cover
looked awesome in Safari, Firefox, Safari Mobile and Chrome Mobile but NOT in Chrome. Banding!
So I decided to handle Chrome differently, insert a background image as PNG or JPG after the page is loaded via jQuery. So I created that image:
I opened the image in Safari, Firefox, Safari Mobile and Chrome Mobile and it looked pretty well, but when I open it in Chrome, it looks incredibly bad.
I am using the most recent Chrome 25.0 on OSX. Can anyone explain, why Chrome is failing so miserably on that image?
Here is the test site:
http://www.bodwell.edu/summer/new_busp_11/
It looks totally fine in any browser, except of course IE.
The menu bar and title png graphics are getting cut off right at where the underlying layer is. I have no idea how to resolve this and still keep this looking as it is in the rest of the browsers, i.e. Firefox, Chrome, Safari, etc.
Help!
If you remove the opacity attribute it will work. (the one below) from the main_panel class
filter: alpha(opacity=90);
In the meantime you can do that (perhaps have an IE specific CSS that will remove that filter).
They look similar enough in my monitor.
You could use that yellow background image with a PNG transparency and not have that tag.
I'm unsure why IE is doing that though.
Anybody have any idea what might cause this in IE8? The background is meant to be a solid blue, but as you can see it's not. This is not on my machine and I've been unable to reproduce it, but one of my clients is getting it:
More details: The background is using a png (which it doesn't strictly need to as it's a solid colour, but it's a legacy app so you know how that goes)
Also he says he is getting it on 2 machines in IE8. But all works fine on his end with chrome and firefox. I also have tried it in IE8, firefox, safari and chrome and they all work fine.
I've come across this. I was using a semi-transparent 1x1 pixel image to overlay some text on a photo and IE8 "created" a fade in the background like your example.
The solution was simply to make the background 2x2 pixels and it works fine.
Hope this helps.