The problem is that I cannot use some inline SVG at all. I noticed about <object > and SVG problems in FF. But the fact is that many other ones are working.
I faced 2 icons from a designer that not working. Not even fill property. It's just invisible. Nothing helps.
I cannot provide more useful information. All icons work as is. Except for this 2. In chrome no problems.
Upd:
https://jsfiddle.net/u0t4tupu/4/
Here an example. These two svg use different clip-path. But in some reason first one makes second one invisible. Try this example in FF. Delete first icon or set them same clip-path - url(#svgicon-h). Then it works. But why?
You have two elements with
id="svgicon-a"
One in each SVG.
id attributes must be unique in a document. If there is more than one on a page the results are browser-dependent. That is why you get a different result on Chrome than you do in Firefox.
The fix is to change the id in one of the SVGs.
https://jsfiddle.net/u0t4tupu/5/
Related
According https://caniuse.com/#feat=svg-fragment claims Chrome has been able to use SVG fragment identifiers in CSS since chrome 50, but this doesn't seem to work properly for all cases.
It seems to work fine for cases like this example which uses an SVG with
<symbol id="arrow">
<polyline points="41.5,67 58.5,50 41.5,33"/>
</symbol>
But then I saw this case that doesn't work properly as of Chrome 63. It uses an SVG with:
<view id="devil-view" viewBox="0 45 48 40"/>
Firefox displays the "As background-image with CSS #ID" one ok, but it too fails to restrict the view of the "As background-image with svgView" one.
For a moment I thought the problem might be that Chrome doesn't support CSS targeting SVGs with VIEW elements and both Chrome and FF don't support CSS using #svgView(viewBox()), but then I saw another example where not only does does a VIEW-element-targeting work, even background-image with #svgView(viewBox()) works for both.
The problem seems to be that if background-sizes aren't set, the browsers don't seem to reflect the viewbox parameters. In the broken monkey and devil example, if you set background-size to 100%, it fixes the problem there.
I haven't found discussion of this elsewhere, and yet it seems like something that must come up, so I'm confused. Is this genrally known as an area of undefined behavior?
How would one handle it for cases where you want a repeating background,
or don't know whether the aspect ratio of your background will match up to the viewbox defined in the SVG? (See this example.)
Aside from CSS, I notice that some SVGs, opened in they're own tab, like https://www.w3.org/Graphics/SVG/Test/20011026/linking-view-BE-04.svg#circle-view restrict the view as one would expect, while other things like https://betravis.github.io/icon-methods/resources/bunny-sprite-sheet.svg#carrot-bunny don't. Perhaps a fault in the way certain SVGs are constructed is causing that, and could that be the answer to the CSS linking issue too? Because this CSS using that w3 SVG does work.
Hi somehow i don't understand the differing display behaviour of a special character used within the content property in Firefox. i've stripped down everything and created a pen:
http://codepen.io/rpkoller/pen/Fbgav
In its' basic form the three lines are way thinner than e.g. within Safari or Chrome. If i add font-weight: bold they get a little bit thicker but still thinner than within Safari/Chrome. What is causing that significant difference in thickness and size (it seems the glyph itself is also displayed bigger in Firefox) towards the other browsers? Any hint would be appreciated. Thanks Ralf
I've noticed this too with other glyphs in the past; on certain glyphs the browsers just don't render the same! Have a look at this thread for another example. I'd suggest for this problem that you should use either an icon font (you can use a generator like IcoMoon), or alternately an SVG file.
See http://www.arthwine.co.uk.
This used to work fine in Chrome and works fine in all other browsers (afaik). Now, for some reason, Chrome is hiding most of the left column (apart from the bear). If you look on a different browser, there is a panel with the branding and a menu in it under the bear.
I can't figure out at all why it's doing this. Any ideas?
The reason it breaks is because of the bear. Or rather, it is because of the way you relatively positions the image of the bear outside the bounds of every single one of it's parent elements except the body.
This makes chromes rendering engine choke on your layout somehow.
You can test this very easily by just deleting the image of the bear from the source code, and see how everything else suddenly pops into place.
I checked it in Chrome 9.0.597.98 and I had the same problem. The solution that I found, is to add position:absolute; for the #header.
I don't see anything wrong in Chrome. I see the menu and the branding.
I fall into an IE bug that I don't find a way to solve
Here's the template http://codecanyon.net/item/tquery-dynamic-tables/full_screen_preview/89478
If you open with Firefox or Chrome, the table header shows correctly, no BLACK, if you use IE7 or IE8, it shows some black space. Why? I tried to change padding, margin... but that didn't work, the black space is still glued. How can I fix such bugs?
Please also, explain what tools, or methods can help fix this bug
Update: Bug Fixed!
The reason is that IE gives an arbitrary size/padding/margin to the img element when the src is undefined.
When the src attribute is defined dynamically through JavaScript, this doesn't correct it. It still undefined, so it doesn't solve the problem.
Solution: Fix a height/width for the image.
The sort image you have in the cells still takes up space - in this case, the space used by IE's default "invalid image" placeholder, because you left the src attribute empty. You can verify this using Developer Tools, and setting the height to 1 pixel.
The problem is that visibility: hidden doesn't mean "don't use any space" - it means "claim the space, but don't show anything there". Use display: none instead if you don't want it to take up any space.
You may still wonder "But why didn't I see this anywhere else?" Well, that's due to the other browsers handling the missing image differently.
One tool that can help is the IE Developer Toolbar, which wil let you look at individual elements and the CSS applied to them. Looking quickly at the real page, not the link you sent (because the IE toolbar can't go through IFRAMEs for some reason), the one thing that pops out is the TD and TH elements in your table head show hasLayout: -1. It's a custom IE property that causes all sorts of bugs. You can read about it here. A couple of quick fixes you can try: apply 'zoom: 1;' or 'position: relative;' to those elements to see if it goes way. That's not a fix, it's a hack, but it often works.
I am using the TwinHelix IE PNG Fix http://www.twinhelix.com/css/iepngfix/ in order to have PNG transparency support in IE, but for whatever reason it doesn't seem to work in IE 6 for unordered lists and list items. Everything else works fantastic. Has anyone experienced this issue before, and did you find a fix for it?
It turns out with this fix there is a list of tags that you need to add to the selector behavior that states what tags can accept the PNG background. These are within the script tag that goes into the header.