Compatibility issues about balloon.css HOT 14 CLOSED

@equinusocio Wow, now that's something I had no idea about. Will be updating the code with the fix tonight.

from balloon.css.

@Zaifor the blurred text is related to issue #21. The fact that the tag still not working on IEs is provably due to use of inline SVG (Internet Explorer doesn't seem to play very well with non-basic SVG stuff).

from balloon.css.

List of browsers:

✅ = Checked and working
🚫 = Checked and not working/compatible

Desktop:

• FF (44+) ✅
• Chrome (45+) ✅
• Safari (9+) ✅
• Edge ✅ (no tail)
• IE (11/10)
• IE (9)

Mobile:

• FF ✅
• Chrome ✅
• Safari Mobile ✅

As I do not have Windows system, I cannot check the project on Edge/IE, same with iOS devices (although some folks reported it works well on iOS). Would be glad if someone could test on those browsers and give a feedback.

from balloon.css.

I tested it on my windows machine.
IE (11/10)
IE (9/8/7-)
not working/compatible

from balloon.css.

Windows 10
IE (Edge)

Works. Only arrows/tails are missing under the toolltips.

from balloon.css.

@stuxt It isn't working even on IE 10/11?

@Zaifor The tail of the tooltips uses embedded svg directly on the background property. As every modern browser accepts this approach, I'm not sure if its a bug of Edge itself or just some missing adjustment.

from balloon.css.

If you use CSS 2.1 :before and :after (instead using CSS3 way ::) will work on every browsers, also IE 8.

from balloon.css.

@Zaifor @equinusocio Could you guys please test the new production files with Internet Explorer?

from balloon.css.

@kazzkiq for reference - ::before / ::after

Also, can we get a read me update once testing is done?

from balloon.css.

@curtismorte Sure, once we test the changes on IE I will create a "Compatibility" section.

from balloon.css.

No change here, but maybe the tag is part of the problem for IE. On IE 11 ( 10 and 9 with DevTools ) it works with divs, but again no tail. Chrome have some issues with the text within divs.
See the image

from balloon.css.

@kazzkiq the inline SVG must be URL encoded to work in IE.
Reduced test case: http://codepen.io/chriscoyier/pen/ZQgvyG/

from balloon.css.

IE10/11 work when the SVG is base64 encoded and an element other than button is used (div, span, a). IE9 partially works (the :before pseudo element is not center aligned correctly). And IE8, well that just fails.

Also, if support of browsers matching '> 1%, last 2 versions' (autoprefixer) is acceptable, a majority of the vendor prefixes are not needed, lightening up the code by almost 25%. IE9/10/11 all still work the same in that scenario.

from balloon.css.

If there are any IE11 issues, please refer them to #47.

from balloon.css.