search

kazzkiq / balloon.css

Simple tooltips made of pure CSS
https://kazzkiq.github.io/balloon.css/
MIT License
5.03k stars 448 forks source link

Which browsers are supported #66

Closed drnkwati closed 5 years ago

drnkwati commented 7 years ago

You should include browser support.

cthedot commented 7 years ago

As far as I deduce from the CSS the vendor prefixed properties support goes back to IE6 or so but even if removing all the "old" prefixes like kthml- and the IE filters support would still be like almost all browsers at least for opacity http://caniuse.com/#search=opacity

There are data URL (SVG?) background images which are not supported in older browsers though.

And less support for the also used "pointer-events" property http://caniuse.com/#search=pointer-events . Guess prefix support for opacity, transform transition should be aligned with pointer-events (have not checked all the CSS, might make sense to keep some prefixed properties).

But this would make browser support a bit clearer while reducing the CSS quite a bit, as an example:

filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
-webkit-transition: all 0.18s ease-out 0.18s;
-moz-transition: all 0.18s ease-out 0.18s;
-ms-transition: all 0.18s ease-out 0.18s;
-o-transition: all 0.18s ease-out 0.18s;
transition: all 0.18s ease-out 0.18s;

would become 

opacity: 0;
-webkit-transition: all 0.18s ease-out 0.18s; /* maybe keep this? */
transition: all 0.18s ease-out 0.18s;

Maybe this is too aggressive but personally I would even loose the -webkit- properties as stuff would work without these but would look a little bit less polished which on these devices probably does not matter much (IMHO).

I have not tested extensively but e.g. I think balloons would work in IE9 without all the filters. The website does not work in IE8 (emulated only) at all so hard to say if that would work at all. Even more reason to loose filter properties and old prefixes.

cthedot commented 7 years ago

have not tested it but what actually about touch support? Hover if at all probably won't work on all devices/OS varieties?

kazzkiq commented 7 years ago

@cthedot It works on both Android (Chrome) and iOS 8+.

iOS has a quirk where you can't "click away" to close the tooltip. The only way to close it is tapping in other element with focus. But its not a blocking bug. #60 has more info on it.

cthedot commented 7 years ago

Guess problem on touch devices is mostly discoverability. If on a button or link I'd click the button but not "long click" to hover. With mouse it is instant even before any click. But that is not specific to your code, just a general problem with hover based stuff I guess.

BTW, the "long click" also works on Windows (tested on Lumia 950 Win Mobile 10 but guess tablet with Edge too)

kazzkiq commented 5 years ago

From v1.0 on those are the browsers we aim to support:

Desktop:

Mobile:

Any other browser that relies on those rendering engines should work just fine, but is not in the list for immediate fixes if something breaks.