Rectangle 27 2

In short: it doesn't work there because you are using CSS properties that don't belong to their (Firefox's and IE's) rendering engine.

Look at the question here to see an informative discussion about it. The gist is: webkit is an Opera rendering engine, and it works in chrome as well because chrome's rendering engine (Gecko) is based on webkit.

From looking at this css-tricks post it seems that to get the best support you should add another css rule without the -webkit-, but it would still not have support across all browsers (look at the final paragraph with the browser-support summary in the post):

.clip>a>img{
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
    clip-path: polygon(0 100%, 0 0, 100% 0, 73% 100%);
}
.clip>a>img:hover{
    -webkit-clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
    clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%);
}

Just to reiterate: this will not fix your problem with IE and Firefox, as they just don't support the clip-path property yet. You can see the browser support here.

Apart from not doing any clipping in IE and Firefox, you can cut rectangular shape as a fallback in IE and FIrefox - for that you can use the deprecated

clip: rect(10px, 20px, 30px, 40px);

Look in the post I linked above - it's the first thing there. As he writes there- it's limited (the image has to be absolutely positioned and you can only use it for rectangles, but it is basically supported by all browsers so it's a good fall-back). So if you can get a fallback-design from that it's worth knowing.

html - Clip path polygon css in not working in firefox and internet ex...

html css polygon
Rectangle 27 1

#yourElement {
-moz-background-clip: padding;     /* Firefox 3.6 */
-webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

should make the border stay outside the box. Here's your updated fiddle: http://jsfiddle.net/PZ58s/16/

html - Cell borders take cell background color when cell opacity below...

html css table
Rectangle 27 1

In these sort of situations, I always find it very helpful to check MDN. In this case, you can check the articles for linear-gradient, background-clip and -webkit-text-fill-color. Near the bottom, there is always a section titled Browser compatibility. It lists, in a table, browsers that support the CSS rules and in footnotes goes into specifics. For example, about the -webkit-text-fill-color, it says that

[1] This feature is implemented behind the preference layout.css.prefixes.webkit, defaulting to false. Since Gecko 49 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46) the preference defaults to true.

This should answer your question on why the -webkit- prefixed version is supported, and since when. Also note that at the top, the article mentions

This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.

In this particular case, you might be able to get away with what you want to do, at least in Firefox and Chrome. Other browsers... that's trickier.

Your other question is if you can gracefully switch to a fallback when a rule is not supported. Unfortunately, this is not possible in pure CSS. It is possible to write rules that specifically target Chrome or Firefox though, but I would advise against using those. You could maybe check for support using JavaScript, but that is something I wholeheartedly advise against.

Finally, "is there any list of foreign vendor prefixes support (like -webkit- prefix support in FF)?" Sort of. Again, MDN is usually very complete and up-to-date. Hope that helps.

The same is true of IE11 and Microsoft Edge. I'm still bitter that things had to come to this, but it is what it is.

css - Firefox support of webkit vendor prefixes - Stack Overflow

css css3 firefox webkit
Rectangle 27 0

First, make sure your document is served as XHTML, not HTML. SVG clipping won't work otherwise. Fix your URL to use instead of &.

Then, remove the clipPathUnits="objectBoundingBox" or you won't get absolute coordinates. Finally, fix your path by using the following points which should get the shape you need: 0,20 125,0 250,20 375,0 500,20 500,300 0,300.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">
<body>
 <style type="text/css">
 #div { background: #ffffff; width: 500px; height: 300px; padding: 10px; }
 #div img { background: #000000; }
 </style>

 <div id="div"><img src="http://maps.google.com/maps/api/staticmap?center=40.714728,-73.998672&amp;zoom=14&amp;size=500x300&amp;sensor=false" alt="" class="t" /></div>

 <style>.t { clip-path: url(#c1); }</style>
 <svg:svg height="0">
   <svg:clipPath id="c1">
     <svg:polyline points="0,20 125,0 250,20 375,0 500,20 500,300 0,300" />
   </svg:clipPath>
 </svg:svg>

</body>
</html>

Firefox SVG: Clip - Stack Overflow

firefox svg
Rectangle 27 0

Unfortunately there isn't an entirely CSS solution to that problem (without seeing partially-rendered text). The nearest thing would be to use the CSS3 property, text-overflow: ellipsis, which will clip the string and add '' to the end. The biggest drawback of this technique is that Firefox doesn't currently support it, and it doesn't look like it will in the near future either. However, there is an alternative and less elegant solution for Firefox that you could use for the time being.

CSS stop text overflowing - Stack Overflow

css text overflow
Rectangle 27 0

Adding clipPathUnits="objectBoundingBox" to clip-path is the solution. But if there are several diamonds in the same page, safari (version 6.1) seems to display only the first one and clips the others (chrome and firefox display all diamonds as expected).

Problems with SVG clip-path using HTML and CSS - Stack Overflow

html css svg clip
Rectangle 27 0

Than you can mark this one as answered.

javascript - Firefox Canvas - Artifacts in path drawing (possible clip...

javascript firefox html5 canvas clip
Rectangle 27 0

I tested your code at firefox 18 and firefox nightly 21 and I can't find a problem. The code do what it is supposed to do.

Confirmed. The code appears to work the same with Chrome and Firefox 18 for me.

Although the issue is no longer relevant for me, it still does not work correctly. [link]s22.postimg.org/88n4c8npt/clip.png

javascript - Canvas: clearRect after clip causes an issue in Firefox -...

javascript firefox canvas html5-canvas
Rectangle 27 0

<!-- <script type="text/javascript" src="http://davidwalsh.name/demo/ZeroClipboard.js"></script> -->
    function copyText(fieldName,buttonName){
        var fieldNameTemp =fieldName;
        var buttonNameTemp =buttonName;
        var val = "";
        try{
            val = navigator.userAgent.toLowerCase();
        }catch(e){}
        var swfurl = "js/ZeroClipboard.swf";
        setTimeout(function () {
            ZeroClipboard.setMoviePath(swfurl);
            var clip = new ZeroClipboard.Client();
            clip.addEventListener('mousedown', function () {
                clip.setText(document.getElementById(fieldNameTemp).value);
            });
            clip.addEventListener('complete', function (client, text) {
                try{
                    if(val.indexOf("opera") > -1 || val.indexOf("msie") > -1 || val.indexOf("safari") > -1 || val.indexOf("chrome") > -1){
                        alert('Your text has been copied');
                    }
                }catch(e){
                    alert('Please alert not use on fireFox');
                }
            });
            clip.glue(buttonNameTemp);
        }, 2000);
    }

jquery - Trouble with ZeroClipboard - Stack Overflow

jquery zeroclipboard
Rectangle 27 0

I actually spent a lot more time on this problem. The main problem here is that @page is not supported by almost all browsers (I think Opera is an exception) even though it is a CSS 2.X specification: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Cascading_Style_Sheets%29#Grammar_and_rules

...and there are several more useful, print-friendly features that I can only dream a browser would support.

@page {
  @bottom-center {
    content: "Copyright 2003-2010 Autoimmunity Research Inc.";
    color: #b31b1b;
    font-size: 11px;
    font-family: verdana;
    margin-bottom: 10px;
  }
}

So what I ended up doing is using one of the few programs on earth that does honor CSS3: PrinceXML.

PrinceXML is awesome! All I had to do was download and install it on my Mac and type into my Terminal this:

/Users/myaccount/prince/bin/prince http://mpkb.org/doku.php/home:1 -o /Users/my account/Desktop/final.pdf

And I get a perfectly formatted PDF. Cool, no?

By the way, for people who want to do something fancy such as a Table of Contents, you should check this article: http://www.alistapart.com/articles/boom

Well, anyway, hope this helps someone else.

css - When exporting as PDF, Firefox clips bottom div intended to prov...

css printing
Rectangle 27 0

The SVG specifications state that all SVG elements that create viewports should have overflow: hidden in the browser's default stylesheet. However, browsers disagree over whether this should include the padding area or not: if you follow the description in the SVG specs, as Firefox does, padding would not be included. However, general CSS/HTML layout does not consider content in the padding to be overflow, so Webkit/Blink/IE browsers do not clip it with overflow:hidden.

Awesome, that one simple line of CSS worked! I think I had tried that on the iframe itself, but apparently not on the svg element. I appreciate the help!

html - Firefox CSS and/or D3 difference - Stack Overflow

html css firefox svg d3.js
Rectangle 27 0

I figured out a combinations of CSS settings that now make the SVGs Render in entirety in Safari (as well as in Chrome, Firefox, and Edge); Safari no longer clips them/cuts them off. My sizing and calculations are not perfect, but the display settings work, you will need to tweak the size according to your own needs adjusting the height of the SVG container/parent. My javascript (which controls other aspects of the page) are wonky, but the SVG settings are more or less correct. I hope this helps someone.

The inline html declaration of the SVG

viewBox
overflow: visible
@Paul Lebeau
none

Here is the code:

<svg class="areaSVG notFixed index" viewBox="0 0 80 80"  xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

If you are not using my javascript to resize the svgs, use the following css settings for the SVG container (.ey-col-svg) and the SVG itself (.areaSVG):

/* the SVG parent/container */

.ey-col.svg {
    display: block;
    height: auto;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}


/* the SVG itself */

.areaSVG {
    display: inline-block;
    max-height: 15vh; 
    box-sizing: content-box;
    margin: 0;
}

both the container and the SVG will both initially have the setting display: none in the CSS

.ey-col-svg
display: block
.areaSVG
display: inline-block

Also, my javascript in my codepen has changed. It now works better if I adjust the height of the container (.ey-col-svg) instead of the of SVG (.areaSVG) itself. Another option that might work better for users is changing the max-height of the container, instead of the height (as I have done).

xMidYMid meet
preserveAspectRatio

Do you think I should remove that part from my answer then? Some Safari svg fixes recommend having the preserveAspectRatio set to none, and my inclusion here clarifies that it should be set to 'XMidYMid meet'. If you think the answer is better without it, I'll remove that bit.

(I removed the `'preserveAspectRatio' , but mentioned that it needs to remain with the default setting.)

html - Safari not rendering SVGs to the desired size/height (SVGS are ...

html svg safari cross-browser alignment
Rectangle 27 0

<!-- <script type="text/javascript" src="http://davidwalsh.name/demo/ZeroClipboard.js"></script> -->
    function copyText(fieldName,buttonName){
        var fieldNameTemp =fieldName;
        var buttonNameTemp =buttonName;
        var val = "";
        try{
            val = navigator.userAgent.toLowerCase();
        }catch(e){}
        var swfurl = "js/ZeroClipboard.swf";
        setTimeout(function () {
            ZeroClipboard.setMoviePath(swfurl);
            var clip = new ZeroClipboard.Client();
            clip.addEventListener('mousedown', function () {
                clip.setText(document.getElementById(fieldNameTemp).value);
            });
            clip.addEventListener('complete', function (client, text) {
                try{
                    if(val.indexOf("opera") > -1 || val.indexOf("msie") > -1 || val.indexOf("safari") > -1 || val.indexOf("chrome") > -1){
                        alert('Your text has been copied');
                    }
                }catch(e){
                    alert('Please alert not use on fireFox');
                }
            });
            clip.glue(buttonNameTemp);
        }, 2000);
    }

javascript - ZeroClipboard user script adding in mouse over, working i...

javascript flash google-chrome userscripts zeroclipboard
Rectangle 27 0

if ("your clients simply cannot have flash installed" && 
        "you must have them copying and pasting all around") {
    if (they("configure firefox to enable javascript access to the clipboard")
            .seeBelow()) {
        you("can implement a solution in javascript, and wrap it with JSNI");
    } else {
        they("must install a firefox addon for that purpose, there are plenty"); 
    }
} else {
    just("go with flash, man");
}
user.js

How to implement copy to clip borad functionality in GWT for FireFox b...

gwt copy-paste jsni
Rectangle 27 0

I don't think you can do it the way you're approaching it - even if you could make the shadow a part of the clip, you wouldn't see it when you applied the clip because none of the colour is retained, just the opacity of the pixels is used to determine what shows through. What will work (in Firefox at least), is to apply both the clip and the filter to content within the SVG like this:

<g filter="url(#dropshadow)">
    <foreignObject width="300" height="300" clip-path="url(#c1)">
        <body>
            <div id="target"></div>
        </body>
    </foreignObject>
</g>

That's awesome, thank you! Maybe you can also give a few tips (or at least a google search query) about how to make it work in other svg-enabled browsers?

Chrome and Opera's support for clipPath seems to be somewhat broken at the moment, especially embedded in HTML5 content. I'm not sure there's much you can do unless you're able to submit patches yourself.

html - Add filter to clipped element in svg (combine clipPath and filt...

html html5 svg
Rectangle 27 0

<!-- <script type="text/javascript" src="http://davidwalsh.name/demo/ZeroClipboard.js"></script> -->
    function copyText(fieldName,buttonName){
        var fieldNameTemp =fieldName;
        var buttonNameTemp =buttonName;
        var val = "";
        try{
            val = navigator.userAgent.toLowerCase();
        }catch(e){}
        var swfurl = "js/ZeroClipboard.swf";
        setTimeout(function () {
            ZeroClipboard.setMoviePath(swfurl);
            var clip = new ZeroClipboard.Client();
            clip.addEventListener('mousedown', function () {
                clip.setText(document.getElementById(fieldNameTemp).value);
            });
            clip.addEventListener('complete', function (client, text) {
                try{
                    if(val.indexOf("opera") > -1 || val.indexOf("msie") > -1 || val.indexOf("safari") > -1 || val.indexOf("chrome") > -1){
                        alert('Your text has been copied');
                    }
                }catch(e){
                    alert('Please alert not use on fireFox');
                }
            });
            clip.glue(buttonNameTemp);
        }, 2000);
    }

javascript - ZeroClipboard user script adding in mouse over, working i...

javascript flash google-chrome userscripts zeroclipboard
Rectangle 27 0

My latest Chrome, Firefox, and Safari clip the image to the container's border-radius (as intended).

In Firefox 15, I see the image clipped when the container has {overflow: hidden}. (Clipping of child content seems to have been added in Gecko 2.0.)

{position: static; overflow: hidden}
{position: static}

css - How do I prevent an image from overflowing a rounded corner box ...

css design css3
Rectangle 27 0

overflow:hidden; clips the content. However, if the contents don't fit the screen, there will be a scrolling of course. Overflow just clips the contents according to the container dimensions. Just try it and you'll see it works. I just tested on firefox (mac).

Usually if something like this happens if IE / FF, then it has to do with the box model bug. Just add

-webkit-box-sizing: border-box; /* content-box */
-moz-box-sizing: border-box;
box-sizing: border-box;

html - Container overflow, fine in Chrome, weird in IE / FF - Stack Ov...

html css overflow
Rectangle 27 0

For the circle image you can try adding the following to your css:

Firefox clip-path CSS code does not accept - Stack Overflow

css firefox clip
Rectangle 27 0

My experience with print CSS is limited but try this:

@page {
   margin-bottom: 4cm;
}

#print-footer {
   display: block;
   position: fixed;
   bottom: -10px;
}

I was able to get se the copyright in every page, but it was overlapping with the content and I couldn't get the @page property working. Here are some things you could try.

@page copyspace { margin: 5cm; }

body { page: copyspace; }

#print-footer { ... }

css - When exporting as PDF, Firefox clips bottom div intended to prov...

css printing