Safari Mobile and object-position property - html

I have a question regarding Safari Mobile and CSS object-position/object-fit property.
I've tried to use it, but it doesn't work for me.
I've seen 2 different answers(Safari Mobile supporting this property and doesn't support)
There is my example:
img {
object-position: 0 -300px;
width: 112px;
height: 50px;
display: block;
float: left;
margin-right: 10px;
}
I'm using CSS sprites for menu icons as img, not as background.
How I can solve this issue?

iOS safari does support object-fit however doesn't support object-position
See Can I use CSS3 object-fit/object-position ?
1 Partial support in Safari refers to support for object-fit but not object-position.
A possible solution is using background with background-position
Other solution, given you are using icons, would be using glyphs, from Font-Awesome or Glyphicons, just to name a few.
Here is a good article about CSS sprites

Related

IE doesn't show SVG

the IE doesn't show SVG images on my website.
The first image that isn't shown is a logo image which is put via :before content in front of a Logofont.
the css code is the following:
.logo-svg:before {
content: url('images/logo.svg');
}
.logo-svg {
height: 1.6em;
width: 1.6em;
display: inline-block;
margin-right: 0.2em;
position: relative;
top: 0.2em;
}
Then a few images, that are background images for icons are not shown too, the CSS is here:
.author-link-posts {
background-image: url("/images/icons/svg/archive.svg") !important
}
Has somebody an idea why the IE doesn't show the SVG or maybe a workaround or something like this?
Regards,
Markus
SVG is not supported in IE8 and below. Is this issue happened in all other browsers? Also you can use modernizr as a fallback.
Basically Modernizr will add a "no-svg" class in tag.
The solution are the paths. I had to put the slash before the path, so it works in the IE.

Background-size issue in IE and Google Chrome

I am using background-size on Chrome and found out it is CSS3 which is not supported in old versions of IE. Hence I have gone through some posts and someone recommended to use this filter:
progid:DXImageTransform.Microsoft.AlphaImageLoader
HTML:
<span class="num_blue_small small"><span class="numberText">4</span></span>
CSS:
.num_blue_small
{
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='/images/num_blue_small.png',
sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/num_blue_small.png', sizingMethod='scale')";
}
.small
{
display: inline-block;
height: 35px;
width: 35px;
text-align: center;
vertical-align: middle;
line-height: 35px;
}
.numberText
{
color: White;
}
By implementing the "filter", it works perfectly in IE7; however, it turns invisible in Google Chrome.
If I include background: url(/images/num_blue_ssc.png) no-repeat; in .num_blue_small CSS class, it will work fine in Chrome but IE 7 will show 2 same images with different sizes.
What should I do to get it fixed?
you could try the background-size polyfill
An IE behavior adding support for background-size to IE8. of Louis Remi
Progressive Enhancement is the mantra I live by. It means "Have fun
with CSS3 and don't worry about IE8 users; they'll never notice
they're missing out on your gorgeous text-shadows and gradients,
anyway".
All was well until I discovered the elegance of background-size:
cover; and background-size: contain;. The first one, for instance,
allows an image to completely cover a background, without having to
send a 1920x1080 background image down the pipes.
Unfortunately, they don't degrade gracefully: websites would likely
appear broken to IE8 users
They offer that feature:
correct position and size of the background image
updated position and size on browser resize
updated image, position and size when the background-image is modified
but seems they have some limitation:
multiple backgrounds (although the :after trick can still be used)
4 values syntax of background-position
any repeat value in background-repeat
non-default values of background-[clip/origin/attachment/scroll]
resizing the background when the dimensions of the element change

How to make text clip inside navbar?

I am trying to make a website and i want to clip(mask) text from navbar. The text becomes like a hole in the navbar and background image is seen through it. How to do this?
JSFIDDLE
//css code
text{
background-image: inherit;
color: transparent;
font-size: 20px;
top: 0px;
position: relative;
margin-top: 10px;
padding: 0px;
}
There's a CSS property called background-clip that seems to do do what you're looking for. It's is unfortunatly not supported before IE9 (but works on other main broswers : Chrome, FF, Opera, Safari).
Depending on the importance of this implementation you can always have a different rendering for older IE versions and use background-clip in any other context.
See this Fiddle and comment to tell me if it's what you were looking for!
EDIT : I misunderstood the initial request. I'll try to find a suitable solution for the actual question! Sorry about that.

Using SVG as CSS3 background-image with scaling

When I use SVG in background property like this:
.svg-button {
-webkit-transform: scale(3.0) // root of the problem!
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
I get blurred image as result. At the same time text in tag with this style is clear. Also if I scale page by using CTRL++ (browser zoom) instead transform property everything is clear.
If I replace CSS background property on:
<object type="image/svg+xml" data="Button.svg" width="32" height="32"></object>
the image is clear in any scale in any case.
Where is the problem?
Sample on jsfiddle
Update:
I found some more information about this problem:
StackOverflow question
Bug ticket for Chrome (I tried my test under Safari/Chrome/IE9/10 and behaviour is the same.
I was "playing" with this a while back and noticed this for fonts too. Although it seems to be fixed now (for the fonts at least).
As far as I understand the inner workings, the contents of the scaled element are mapped to a texture, which in turn is scaled.
As a workaround, try using a 3d translation and move the element on the z-axis to achieve the size change. This won't yield as much control over the final outcome though.
.svg-button {
-webkit-transform: perspective(800px) translateZ(-300px);
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Chrome/Safari IE9/10 I have decided to use CSS zoom property instead scale property.
.svg-button {
zoom: 300%;
background: url(Button.svg) no-repeat;
width: 32px;
height: 32px;
}
For Firefox I still use CSS scale property because Firefox doesn't support zoom property. At the same time Firefox scales SVG background well. See result.
For IE9 I have written javascript which temporary modifies CSS width property and after small delay returns it back. In this way I force redraw CSS background.

Button element styled with CSS is not showing the background-image in IE6

I have a legacy web application that is targeted for IE 6 and is being reskinned. The buttons are having the default browser button look replaced with a blue button image.
My following HTML and CSS works fine on IE 8, but not in IE 6.
HTML
<button id="add">Add</button>
CSS
button
{
width: 110px;
height: 28px;
background-image: url('../images/button.png');
background-color: transparent;
border: 0px none #ff0000;
cursor: hand;
font-family: Myriad Pro, Helvetica;
font-weight: bold;
font-size: 12px;
color: #ffffff;
}
Using CSS, how can I get the background image to show in IE 6?
Ideally the fix could be put in an ie6.css to make it easy to remove when IE6 support is eventually dropped.
Please no comments about dropping support for IE6. This legacy application is designed only for IE6 and used internally at an organisation where IE6 is the ONLY supported browser.
If the recesses of my memory on IE6 serve me well, it does not recognize background-image on a button element. Nothing you can do about it.
Although, again based on memory, if you can change it to an input (attribute type="image") you might be able to get the effect you want even on IE6.
Using the background CSS property instead of the background-image property does the trick as described in this blog post (excerpt below).
The background-image property that worked in Firefox 2.0 just did not
have any effect on IE6. After a bit of googling, I realized that the
background-image property will not work on IE and that we need to use
the background property.
This is what works for me:
button
{
background: transparent url('../images/button.png') no-repeat top;
}