It seems -moz-mask-image is not supported in Firefox.
I am attempting a foreground gradient. I can't use an image as i need the text to be selectable. Does anyone have any ideas for Firefox?
This version works in chrome and safari
css:
-webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgba(0,0,0,0)), color-stop(0.52, rgba(0,0,0,.5)), color-stop(0.77, rgba(0,0,0,1)));
-moz-mask: -moz-gradient(linear, left bottom, left top, color-stop(0.16, rgba(0,0,0,0)), color-stop(0.52, rgba(0,0,0,.5)), color-stop(0.77, rgba(0,0,0,1)));
According to MDN, you can just use mask for Firefox, as of Firefox 3.5:
https://developer.mozilla.org/en/CSS/mask
However, mask requires an SVG image to act as the mask. You might be able to base-64 encode your SVG image into your stylesheet, or you can use an SVG image file.
Related
A Firefox change broke some of my background/border images. See this issue for more details: CSS - New Firefox-release doesn't show Border-Image anymore. When I fixed this issue by adding border-style: solid my text now displays a white/gray background behind it. Any idea why this might be happening. See my image on Chrome (how it is supposed to look) and then on Firefox.
Chrome:
Firefox:
Here is the jsfiddle link: http://jsfiddle.net/nirodhasoftware/offuhxao/1/
You need to draw a background too.
From pseudo or from element itself :2 examples to tune to your needs.
pseudo:
background:#5099D6;
background-clip:padding-box;
element:
background:url(http://www.rwe-uk.com/static/ichat_with_css3/speech_bubble_left_2.png) center / 300% 150%;
background-clip:content-box;
There is a thing in default stylesheet firefox who make : line-height:normal !important; for the input.
My text with font-size:20px; have a computed line-height of 37px in firefox. My container (the input) have a fixed height of 30px and i can't center my text with padding because content > container and CSS don't allow negative padding.
I use a icon font and this is what i need a big font-size.
No problem with chrome, ie etc ...
Unfortunately I can't replace the by another html element.
I did a test in my firefox and the line-height rendered was from my code.
I used a simple css code:
div{
line-height:2;
}
The jsfiddle for you test in your firefox browser: http://jsfiddle.net/yso6v2po/5/
Did you check the version of your firefox?
I'm looking for a way to set an image to the 100% height of the browser window (with a small padding at the bottom), centred on the page.
I've set up an example in codepen, which works great in Chrome and Safari, but not Firefox, where the image shows at full size. What am I missing?
http://cdpn.io/sHJhl
.photo-bkg also needs its height set:
.photo-bkg { height: 100%; }
Here's a working fork of your pen.
This is best explained with images.
Firefox, right:
Chrome, wrong:
jsfiddle.
That is a (fully green) image with 2px (red) border and a border-radius of 6px. In my design, the border is barely visible, so the image looks completely square in Chrome.
Is it possible to achieve the correct result in Chrome without extra markup nor javascript?
I don't believe you can do this with Chrome. Images will extend over the bounds of border-radius, and I think that's the intended behavior (or else they just didn't notice).
When using a div, for example, you can see that the background behaves as it should. You could consider using a div instead of img, and using your source image as the background (and forcing its width and height).
Plainly said: In Chrome, there does not seem to be a way to force your image to be hidden by the border of itself (or even of its container) unless it is set as a background. In fact, the issue has been asked about before, and blogged about as well (and, in fact, patrickzdb's comment there may help you).
Apparently it is a bug in chrome..
I normally apply box-shadow for chrome instead of border.
so, if you don't mind to apply css hack to workaround it without javascript: http://jsfiddle.net/3cuHU/
We need to view some very large (7200+ pixels) SVGs. Every SVG viewer I've found, including modern web browsers, does not allow us to view the entire image. There aren't any scrollbars, and we do not have the option to zoom.
Is an open source / free application available that could help with viewing the entire SVG image? Thanks!
If you really do mean SVG, Inkscape should work.
You need to add viewBox attribute to the <svg> element and wievers will scale the image to the available viewport.
<svg viewBox='0 0 7200 7200' ... >
You may want to try Opera SVG Viewer to preview multiple svg files at once.
If you use a custom css browser extension such as Stylus, you can set up a CSS style for overflow on the root element, which should be <svg>:
:root {
overflow:auto !important;
}
This is pretty harmless for any html page but you can have it only apply to .svg urls via the url regex filter:
^.*[.]svg$
Now with this in place, opening an svg in a new tab will apply the style and allow you to scroll around. Zooming in and out should automatically adjust scrollbars.