First question on stackoverflow, hope it's not too boneheaded. I've been trying to figure out a way to display a calendar with split event days. What I came up with was using an SVG graphic placed with inline css as a background for the specific calendar table cell in order to split days that have a split. It works wonderfully in Firefox and Chrome but the graphics do not display in Internet explorer (I've tried 9 and 10 but not 11).
The calendar is first generated with javascript and events are placed by adding css classes to targeted cells from JSON data.
Here is a small snip of the a CSS classes being used to apply the background, full example with the HTML in the fiddle:
.calendar td {
position:relative;
}
.calendar .split {
background-repeat:no-repeat;
background-position: top left;
background-size: 100% 100%;
}
.calendar .split.am_vaca{ background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1' preserveAspectRatio='none'><polygon points='0,0 1,0 0,1' style='stroke-width:0; fill:lightgreen;' /></svg>");}
Here is the fiddle containing the HTML and CSS that illustrates the issue:
http://jsfiddle.net/0mspvexg/2/
Running the fiddle in Firefox and chrome shows the split days properly but Internet explorer 9, 10, (11?) does not display the split days.
I have looked at similar questions such as the following but have not yet found any clear solutions:
SVG background image in IE9
Inline SVG not working as background-image in IE
Anyone have any experience with getting Internet explorer to display inline SVG as a background or see something obvious I'm overlooking or maybe I'm approaching this the wrong way. Thanks!
IE works if you base64 encode the data e.g.
.calendar .split.pm_mgmt{ background-image: url("data:image/svg+xml;charset=utf8;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxIDEnICBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSdub25lJz48cG9seWdvbiBwb2ludHM9JzEsMSAxLDAgMCwxJyBzdHlsZT0nc3Ryb2tlLXdpZHRoOjA7IGZpbGw6ZG9kZ2VyYmx1ZTsnIC8+PC9zdmc+");}
Unfortunately you need use URI encoding (or base64) for Internet Explorer.
With URI encoding you keep the posibility to change the SVG values, but it's hard to read.
.calendar .split.am_vaca { background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%201%201'%20%20preserveAspectRatio%3D'none'%3E%3Cpolygon%20points%3D'0%2C0%201%2C0%200%2C1'%20style%3D'stroke-width%3A0%3B%20fill%3Alightgreen%3B'%20%2F%3E%3C%2Fsvg%3E"); }
You can encode your SVG here:
http://pressbin.com/tools/urlencode_urldecode/
And choose the encodeURIComponent() option.
If you are using Compass you can automate base64 encoding:
http://keegan.st/2012/09/14/easy-image-data-uris-with-compass/
Related
I have this div :
<div id="trees"></div>
Formatted with this css:
#trees {
width: 100%;
position: absolute;
top: 37%;
height: 40%;
background: url("/img/Tree.png") repeat-x;
background-size: auto 100%;
}
It works fine in all the browsers I tested, with this result:
Except in IE/Edge, where it looks like this:
Trees with color glitches:
The weirdest part is that this issue does not affect any other divs with similarly configured background images like the train tracks or the mountains... I have search a lot on this and couldn't seem to find an answer anywhere. I also tried to convert the image from png to gif and I got the same result. How would I fix this for IE/Edge compatibility?
Here is a codepen reproducing the problem in Edge: https://codepen.io/darthmooguy/pen/gmNWwg
I was having the same issue as you, and whilst this doesn't resolve the cause of the issue, I've found that adding transparent padding to the edges of your image and increasing the background size is a usable workaround in many cases.
https://codepen.io/anon/pen/BRwxbR
Adding the following scaled my background, so set it to an appropriate level.
background-size: auto 250%;
background-position: center center;
Please ignore the colour change - I was also wondering if a specific colour triggered it based on your initial problem, but it did not.
I might look at this further as my workaround here does not actually solve my issue. :)
here is the tree image (png) saved from Irfanview (save with transparency, no compression)...I'm not sure if Irfanview has stripped the Adobe meta data though.
as you can see... the colors and transparency color is completely different from the adobe authored source.
This page renders correctly in every other common browser except Safari. (Yes, it's a mess, I haven't finished the site yet) Safari quickly displays certain elements, then replaces them with white. In particular background images (or colors) in the body tag and , also text in a paragraph tag.
http://sr.hi-speedinter.net/staging/
Yet similar code works on the homepage http://sr.hi-speedinter.net where the body background image displays correctly.
I'm baffled! I've searched for about 2 hours and tried lots of tweaks but nothing has had any effect.
Here's some of the CSS
body.src-sub-page {
background: url("http://sr.hi-speedinter.net/wp-content/themes/twentyfourteen-child/images/sub_page_bg_tile.jpg");
background-color: #edeff3;
background-position: top;
background-repeat: repeat-x;
}
.src-sub-page .site-main {
background-image: url("http://sr.hi-speedinter.net/wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png");
background-position: top center;
background-repeat: no-repeat;
}
Any ideas where I'm going wrong?
Did you search for Safari bugs? And what happens if you disbale the rest of the CSS?
Is JPG and PNG not working?
Did you try background instead of background-color?
Did you try it on another PC?
Also try to change these
http://sr.hi-speedinter.net/wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png"
to
wp-content/uploads/2015/02/SRC_InternalPage_Graphic.png
Thanks Gintoki, I had actually tried most of those, but the real problem turned out to be Safari for PC. I found someone nearby with Safari on a MAC and the page worked perfectly.
But for anyone else having similar issues, I highly recommend trying those steps above. Good to have it in one list!
I am using the filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFFFFF', endColorstr='#0000FF',GradientType=0 ); code to set the gradient background image in IE9.
Here is my fiddle.
The result in IE9 looks like,
But, i got trouble with the border-radius style.
What's wrong in my code? Is there any solution for this?
I have found the similar question on
IE9 round corners and filter: progid:DXImageTransform.Microsoft.gradient With answer of
Add the browser specific class or Set svg data as background image.
I don't like to use different css file or adding different HTMLElement based on browser version.
It might affect the performance of page when i use svg data as background-image.
You can add another element inside your .gradient_style which will have background-image and filter set. Then set overflow: hidden on parent element and you should be good.
Example CSS:
.gradient_style {
background: transparent;
height: 50px;
width: 150px;
border-radius: 25px;
border: 1px solid #050DFA;
overflow: hidden;
}
.gradient_style div {
background-image: linear-gradient(to bottom, #FFFFFF 0%, #00A3EF 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFF', endColorstr='#00A3EF', GradientType=0);
width: 100%;
height: 100%;
}
And HTML:
<div class="gradient_style"><div></div></div>
Working sample: http://jsfiddle.net/DymK5/2/
This is a known bug in IE9, where a background gradient using the filter style ignores the border-radius and always renders the gradient into the corners of the element.
It is unfortunate that IE9 didn't implement standard CSS gradient syntax, which makes this kind of thing necessary.
There are work-around options, but they're all a bit ugly.
The most well-known work-around option is to use an SVG data-URL for the gradient, for IE9 only. The issues with this are that you still need the filter for IE8 support, and of course IE10/11 does use standard CSS gradients, so you need to start using conditional stylesheets to set the styles depending on the brower version. It gets ugly very quickly.
I wouldn't worry too much about performance of this; it should be fine. The problems are more with managing the code than with perf. (and in any case, even if there is a perf issue, it will only affect the specific browser version involved, IE9, so it will be a relatively small portion of your audience)
Another option is to use the CSS3Pie polyfill script. This is a good option because it allows you to use standard CSS code for your gradients in all IE versions. Since you say you dislike using different CSS for different browser versions, this is a big plus point.
The downside is that it is Javascript-based, so could have performance implications. But that said, I've never seen it have any perf problems with it, as long as you're not over-doing it (ie using it for hundreds of elements on the same page).
If all else fails, I guess there's always the option of simply just not supporting gradients for old IE versions, and having a plain solid-colour background fallback.
If I include the css style 'writing-mode: tb-rl', which is used for writing vertical text, in the html stream that is to be converted to pdf, I get a repeat of the first 30 pages, up to the number of pages that should have rendered, which is always counted correctly.
SO for example in a 70 page pdf, it will show 70 pages but will repeat the first 30, between 30 and 59, and then show the first 10 again for 60 onwards.
If I remove the vertical text, i.e the style writing-mode: tb-rl, everything returns to normal. The vertical text when displayed is rendered correctly on page 21.
This happens in our code that uses the pdf library, and also in the example provided by Winnovative.
Has anyone dealt with this before? I would love a fix or work around as Winnovative are slow to respond to anything. Thanks
I never did find a direct work around to this issue.
Winnovative HTML2PDF is inconsistent in all version (tried up to 7) when the output includes vertical text in a multi-page document.
I would guess that this is something to do with page flowing/measuring calculations.
One alternative which we tested to work (but we did not use for other reasons) was to switch to evo pdf - a Winnovative sister product and their recommended solution to several internet explorer based issues apparent in the Winnovative HTML2PDF solution.
Our solution in the end was to use the existing Winnovative library to convert the pages with vertical text into non paged images (full height), and then embed the image in the PDF.
Winnovative HTML to PDF converter rendering is compatible with WebKit rendering. The supported way to rotate text is using CSS -webkit-transform property. For example, you can rotate a whole div 5 degrees clockwise using the following code:
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 200px;
height: 100px;
background-color: yellow;
/* Rotate div */
-webkit-transform: rotate(5deg);
}
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
I've been working at this all morning hopefully someone can see the problem, I've missed.
I have a background image set for my header, it works fine in all browsers except IE8 and below, even works fine in IE9 Beta.
Here is the link, http://test.medialayer.net/
Here is the css for the header,
header {
width: 890px;
height: 90px;
background: #fff url('/images/headerBG.png') repeat-x top left;
margin: 0 0 18px 35px;
padding: 0 0 0 10px;
}
I've tried rearranging the order of the css to no avail, it's not the missing space after (), other background images on the page work fine and are set up identically, I've tried using jpg instead of png, made a whole new png, made sure it was rgb not cmyk, and still nothing.
I have no idea what to try next,
thanks in advance to anyone who takes a look.
Chuck
If you open the page in IE9, open the developer tools (F12) and change the document mode to IE8, you see that the styling of the header element aren't applied.
The header element is an HTML 5 element, which IE8 and below doesn't understand.
IE 8 chokes on <header>, which is a HTML 5 element.
See this question for workarounds: Does Internet Explorer 8 support HTML 5?
The most popular seems to be the HTML 5 shim.