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.
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 am working on a website and I have been having trouble getting the whole thing to zoom out to about 80% on firefox.
It zooms to the perfect size on internet explorer and google chrome but since I have to use -moz-transform:scale() rather than a zoom function, it not only messes with the spacing but it also removes my fixed footer.
Currently the following options are working to get it to the right size on chrome and IE but I am wondering if there is another property for firefox which I can use to zoom. Thanks for all your help!
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?
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.
I am having a strange problem with mobile safari. Images that are backgrounds on certain divs do not file all the way across the page, they stop just short of halfway across. They show up fine in safari on the PC and Mac.
site online here:
www.bikramyoga.cz
Tried making the tile 10px wide instead of 1px? It might be an issue with the number of repeats Mobile Safari can handle.