I have a background image (background: url('...svg') no-repeat;) which I force into the right size with background-size: 100% 100%;. This creates the desired effect and seemed to work great, until I looked at the page with Safari. Safari seems to ignore my background-size settings and use background-size: contain; instead (it centers the image though, so not exactly contain).
I found an other post on Stack Overflow which said that one has to use -webkit-background-size for Safari. That doesn't work either though.
You can see what I mean in this jsfiddle. In Safari both divs will look the same.
Does anyone know how I get this working in Safari?
This seems to be an issue with your Data URI. If you replace the url() link to a normal image link, the sizing on Safari should work like expected. The sizing will also work if you use a different data type in the URI (something besides an SVG).
Cheers,
Jeffrey
Related
I'm trying to implement a very simple video as a banner on a website using html5 tags. I just need it to be full width and responsive, which appears to work perfectly in Chrome and Firefox, but not Safari.
Here is a simplified version taken from a more complex wordpress page using exactly the same markup and the same happens.
http://noisilyfestival.com/video-test.html
I've set the video background to red, see in Safari there are huge gaps at the top and bottom whereas in Firefox and Chrome it sits flush.
Can't figure out for the life of me what's going on here! I've set the video to display:block which fixes the few pixel gap at the bottom but cannot resolve this. Thanks in advance!
I removed display:block; from #homepage-video and Safari looked just fine.
It was pointed out to me that on resizing the browser width the issue would correct itself. Therefore the intrinsic ratio technique is the most efficient way to ensure this works cross browser...
http://alistapart.com/article/creating-intrinsic-ratios-for-video
Works as it should now on all browsers I've tested it on.
When trying to apply a "stripy" border-image to a text input field it breaks in Mozilla Firefox under certain parameters.
Take a look at this jsfiddle: http://jsfiddle.net/sxpL9zw1
As you can see the page renders a simple text field with a black stripy border around it. This fiddle actually works just fine in any browser I've tried.
However, things get really weird when I run the exact same markup on my host or on localhost: http://test.tonybogdanov.com/border-image-mozilla-issue/
Here's what I see when I open the URL with the latest Mozilla Firefox (35.0):
As you can see the left and right borders render properly, but the top and bottom ones are somehow "solid" looking. I've also tested this in IE10, Chrome, Opera and Safari on Windows and they all show the border just fine, except Firefox.
Furthermore, when I increase the border-width above 9px the issue disappears, which also happens when I remove the width property.
Any ideas what might be causing this or why can't I reproduce it in a jsfiddle?
P.S. I also tried this by drag-and-dropping the HTML file in Firefox (to rule out any host-related issues) and it still fails. Here's a zip to try it yourself: http://test.tonybogdanov.com/border-image-mozilla-issue/files.zip
Welcome to one of the most counter-intuitive bits of CSS.
You can use this tool: http://border-image.com/ with your image and work out what the correct offsets and border sizes should be. (You can preview the border around the CSS text at the bottom)
Good luck
Try zooming in (using the page zoom feature, e.g. cmd+) this piece of HTML/CSS in Firefox:
http://jsfiddle.net/W68eL/4/
Now, try the same thing in Chrome.
For some reason, Chrome does not scale up the width/height of the content box, but at the same time scales up the border. I would almost consider this a bug.
Does anyone know of any workarounds?
Edit:
I have filed an issue here, we'll see what the responses are.
Maybe it has to do something with the "em" property. It acts differently for both Firefox and Chrome.
I've taken 20px instead of 1em and then ran it on both the browsers. The effect was same.
Fiddle it: http://jsfiddle.net/W68eL/5/
I have been stuck on this for a long time.
This page has several image icons to the left of the text content. These images get loaded perfectly fine in Chrome, Firefox, and IE9, but in IE8, they don't get loaded. IE8 is perfectly fine loading the actual image link directly, so I know it's not a fault with the image itself.
In fact, this only happens on that one page. The other pages are able to load images just fine.
Can anyone explain this huge mystery? Thanks!
the problem seems to be the css rule
.entry-content IMG
{
max-width:97.5%
}
When I remove it the images get displayed... do not know why this happens =/
edit
IE8 seems to have a problem with img tags where the width attribute and the css "max-width" attribute is set... maybe just remove on of them.
I have png images showing larger than their real dimensions in IE8. the img tag doesn't have width & height attributes. The images look fine in Firefox. Is this an issue with IE?
Try pressing CTRL 0
This might help
img { -ms-interpolation-mode: bicubic; }
Sorry should have been a comment I guess...
I found this solution on the css tricks website, It has to do with the way IE renders/re-sizes images which apparently is different from other browsers.
I had the same problem and in-fact this ended up NOT working, but I thought it might be worth a try because the post described the same problem.
I ended up solving it by changing the image style from width:100%; to width:50%; so that it would work on all browsers. Maybe that could work for you too.
Basically it ended up being smaller in Chrome/Firefox and normal size in IE. Instead of normal size in Chrome/Firefox and way too big in IE.
But one thing is for sure, YES this is a problem with IE.
Also I noticed the TOR browser has the same exact problem.