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?
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.
Google Chrome is suddenly showing a fine white border (not an actual border) around my images which have a background-repeat property. Must be because of a Chrome update, but I can't seem to get rid of it.
I'm running version 55.0.2883.95 on a retina mac. Firefox, Safari, and Chrome Mobile all work fine.
You can see what I mean on this site.
Update: Apparently it's because of the hdpi pixel density of my retina screen, so this seems like an issue for the Chrome dev team.
I have a background-image in chrome that should be dynamic. It's part of a image map I'm building. In chrome however when the (absolute size of the) image is larger than that of the parent div on hover the background image just vanishes.
You can see this behaviour in this fiddle. http://jsfiddle.net/Lvv05q1w/4 (EDIT: Changed fiddle to a simplified version) (note this is a snippet of the real app with some features removed to make the problem hopefully more easy to identify. There must be only one image in the real app so solutions having multiple image tags which we then display/hide on hover can't be used here). If you shrink the width of the output so the end of the image is just off the page and hover over the image in ff you'll see the hover image applies. In chrome you'll see the background-image on the div just vanishes.
Browsers Affected
Chrome
Opera
Browsers Unaffected
Chromium (running on Lubuntu 14.04)
Firefox
Internet Explorer 11
Safari (tested via VM only)
Base CSS from fiddle looks like (I know I can compress into the background property but it was making it easier for me to fiddle around in chrome dev tools earlier)
#htmlmap_1 {
background-image: url(http://hm25.dev.blox42.com/images/htmlmaps/branch.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-position: 50% 0%;
background-size: contain;
}
Screenshots of Issue
Prehover image
Posthover - Chrome - The background image attached to the div has vanished - only the main image shows
Posthover - FF Image has resized as expected and the image overlays the background image
EDIT:
The one thing that kinda makes a difference is removing the background-repeat:no-repeat attribute. That gives the expected result of the image shrinking like in ff. However obviously I don't want the image to repeat itself so it is NOT a viable solution. Hopefully it might help someone with a solution tho!
I know that this issue has been discussed before here but I tried every method and none of them worked. I'm trying to make a parallax effect with background-attachment: fixed. On every browser, on every OS is working perfectly except Chrome on Macbook Pro with Retina screen. Here is the website
The webpage isn't renders properly. The elements which have background-attachment: fixed are flickering or don't load at all. If you have Retina you can understand what i'm saying. Just open it in Chrome. For those who don't have retina just look at my screenshot. I'm desperate right now. I'm thinking of killing the functionality of this rule by targeting chrome on hDPI devices. Can i achieve this using jQuery maybe?
many sources of this specific issue
In the photography portfolio linked below, clicking on individual images renders the photo at a max-height of 90% of the browser window. In Safari, Firefox, and Chrome. But IE9 seems to ignore this command entirely and the user must scroll to see any portrait oriented photo in its entirety.
I've googled workarounds, but haven't found any that apply to IE9. Mostly I found Javacript expressions in the stylesheet suggested as workarounds for IE6. Is there a less "expensive" workaround for IE9? Or is it no longer a problem (which is why I can't find anything) and I just have a browser setting wrong?
Here's an example of an image that renders properly in Chrome, Firefox, & Safari - but you have to scroll in IE9: http://russmoorephotography.com/#/portfolio/state-capitol-aisle-capitol-dome/
Edit: this actually doesn't work in Firefox either. Just Chrome & Safari.