Remove `@support`

[jeffkamo]

Status: Ready for Review Reviewers: @ericawright @stewartyu @mikenikles @fractaltheory @jansepar @marlowpayne

Due to an issue in some browsers (i.e. Android 4.4.2, Galaxy S4 default browser), using @support breaks the :not() CSS pseudo selector. See here:

https://bugs.chromium.org/p/chromium/issues/detail?id=257695

In particular, this was an issue in our project here: https://mobify.atlassian.net/browse/CF-105

Also: Removed the Chrome specific fix from before, as I cannot reproduce that particular issue anymore.

Changes

• Removed @support block, replaced with Deckard classes for Safari
• Removed the Chrome specific fix, as it no longer appears to be an issue (as per described in #69)

  Jira Tickets:

• CF-105

  Todos:

• [x] Engineer +1
• Unlink CF project from having this branch as a dependency nevermind, the project package.json points to the commit, not the branch

  How to Test

• Clone this repo and checkout this branch
• Run bower install and npm install
• Run grunt build
• Open examples/index.html in a Galaxy S4, Android 4.4.2 (i.e. Luna) browser
• Open the Pikabu nav
• Notice that the some of the headings in the Pikabu nav are red

Note: I've intentionally added a test case to the example's stylesheet (not the Pikabu's scss) that demonstrates the issue. The red text should be inheriting colors from their parent, but because of the presence of @support, the :not() selector that sets color: inherit isn't being respected.

[fractaltheory]

@jeffkamo do you know the circumstances under which the chrome-specific fix (i.e. #69) was a problem?

[ericawright]

:+1:

[jeffkamo]

@fractaltheory my understanding is that these were the repro steps for the Chrome issue:

1. Open pikabu page in Chrome browser that's small enough that the page scrolls
2. Scroll down a bit
3. Open Pikabu
4. You should see a rendering issue like the one Stewart shows in a screenshot from #66

However I have not been able to reproduce that issue, neither before making any changes, nor after. So... ya, not sure what's up with that.

[fractaltheory]

@jeffkamo Hm, okay. It looks though like width: 100%; was there before the fix for #66 was applied? Is it safe to remove that?

[jeffkamo]

@fractaltheory good point. I've added the width and it's comment back in.

[jeffkamo]

@fractaltheory also, I've added a test to the example in that demonstrates the issue, and I've added instructions to the PR description to see it.

I should have mentioned this earlier, but this issue only seems to occur on Android 4.4.2 (perhaps just the Galazy S4?)

[fractaltheory]

:+1: