Documentation regarding browser support needed

[constructit]

Would appreciate a quick summary of browser support for each component in the Readme. A bit like what you did in this pen: http://codepen.io/LFeh/pen/oEula

[felipefialho]

Perfect @constructit.

It's a good idea. Can you help me for include?

Thanks!

[constructit]

	Chrome	Firefox	Internet Explorer	Opera	Safari	Edge
Android	Yes	Yes	N/A	Untested	N/A	N/A
iOS	No	N/A	N/A	Untested	Yes	N/A
Mac OS X	Yes	Yes	N/A	Untested	Yes	N/A
Windows	Yes	Yes	Yes (9+)	Untested	Yes	Yes

	Internet Explorer
Carousel	9+ *
Collapse	9+ *
Dropdown	9+ *
Modal	9+ *
Tab	9+ *
Tooltip	8+ * **

* CSS3 transitions are not supported in IE8 and below. ** Janky z-index. See tooltip on right example.

Notes:

• Most tests performed with Browserstack.
• Components that perform action on hover may not work on touchscreens eg. dropdown with hover. Oddly tooltip does work. Bootstrap mentions this, “Sticky :hover/:focus on mobile. Even though real hovering isn't possible on most touchscreens, most mobile browsers emulate hovering support and make :hover ‘sticky’. In other words, :hover styles start applying after tapping an element and only stop applying after the user taps some other element.”
• Probably the main reason why the components fail in earlier versions of IE is because they use advanced CSS selectors which aren’t supported. It may be possible to patch this with the use of something like selectivizr. This may defeat the purpose of using these javascript free components but on the other hand it may be acceptable for older IE.
• The components do not fail gracefully. In most cases some elements are visible but interaction will not have any effect. The carousel component won't show anything.
• Some layout issues with tab when wrapping on smaller screen sizes.
• Weird flash when carousel loops around to first slide.

[franciscop]

Firefox in Android works great except when the tabs overflow:

As it is mentioned in the issues as a single thing, I'd add the "Firefox work" but keeping that issue

[constructit]

@franciscop Unfortunately this problem exists in all browsers at smaller sizes because of the way the component is built. The content element .tab-inner is position: absolute which is fine when tabs are few enough to remain on one row. However when the tabs wrap on to multiple rows the content will overlap the tabs.

Another problem is that since .tab-inner is outside of the normal document flow content after the tab component will position under .tab-inner. @LFeh has implemented a very limited workaround by setting .tab-painel to min-height: 150px.

I suggest this component needs rethinking.

[felipefialho]

@franciscop The problem is the position absolute like says the @constructit.

I tried think in other solution (like use negative margin in the .tab-inner), but I don't can make an elegant way without using JavaScript. =/

[felipefialho]

@constructit Thanks for the documentation.

Can I include your text in the Readme?

[constructit]

Sure, do what you want with it!

[felipefialho]

Hey @constructit, can you check?

Thanks for your help :D

[franciscop]

I've based Picnic CSS tabs plugin in this library's one, but I fixed this issue apparently when creating it (Check the tests). However the documentation for the plugin is broken right now.