Switch workaround prop to opacity

This is to avoid having to do prefixing. If this turns out to be
less reliable we will switch back to transform.

Author: cvle

src/composables/withWorkaround.spec.tsx

@@ -34,7 +34,7 @@ describe("withWorkaround", () => {
 
   it("should have default style", () => {
     const style = wrapper.childAt(0).props().style;
-    assert.deepEqual(style, { transform: "scale(0.99)" });
+    assert.deepEqual(style, { opacity: 0.9 });
   });
 
   describe("during a transition", () => {
@@ -52,12 +52,12 @@ describe("withWorkaround", () => {
 
     it("should perform a second transition", () => {
       const style = wrapper.childAt(0).props().style;
-      assert.deepEqual(style, { transform: "scale(1.0)", transition: "transform 1ms linear 10ms" });
+      assert.deepEqual(style, { opacity: 1.0, transition: "opacity 1ms linear 10ms" });
     });
 
     describe("when second transition ends", () => {
       before(() => {
-        wrapper.childAt(0).simulate("transitionEnd", { propertyName: "transform" });
+        wrapper.childAt(0).simulate("transitionEnd", { propertyName: "opacity" });
       });
 
       it("should call onTransitionStart", () => {

src/composables/withWorkaround.tsx

@@ -35,11 +35,11 @@ export const withWorkaround = combine(
   ) => {
     const workaroundProps: React.HTMLProps<HTMLSpanElement> = {
       key: "workaround",
-      style: { transform: "scale(0.99)" },
+      style: { opacity: 0.9 },
     };
     if (inTransition) {
       workaroundProps.onTransitionEnd = workaroundHandler;
-      workaroundProps.style = { transform: "scale(1.0)", transition: `transform 1ms linear ${firstPropertyDelay}ms` };
+      workaroundProps.style = { opacity: 1.0, transition: `opacity 1ms linear ${firstPropertyDelay}ms` };
     }
     return {
       children: [<span {...workaroundProps } />, ...Children.toArray(children)],