disable hover effect and double click issue on ipad(touch devices) using vue js

Question

In my application, there are multiple cards and left/right paddles. For normal browsing(safari,firefox,chrome) in desktop/laptop, that left/right paddles are visible while hovering over those cards. Inside those cards all the link/hyperlink are working fine in desktop/laptop

I am using @mouseover to show those paddles to scroll those cards. In ipad(touch devices), that problem occurs. Because hover effect is not working in touch devices.

Problem

1. Those paddles are visible only after first click because hovering is not working for touch devices.

So, i want to disable the hover for touch devices and show the paddles on first rendering. I have checked media queries but it is not working. I am not using jquery. So, how can i show those paddles on initial loading for touch device using vue js.

Code snippet

    <div
              v-show="grid"
              class="second-row"
              @mouseover="showPaddle"
              @scroll.passive="setScrolledLeft"
            >
              <div class="paddles">
                <button
                  v-if="showRightPaddle"
                  tabindex="-1"
                  class="right-paddle paddle"
                  @click="scrollCards('right')"
                >
                  <i class="el-icon-arrow-right-fill" />
                </button>
                <button
                  v-if="showLeftPaddle"
                  tabindex="-1"
                  class="left-paddle paddle"
                  @click="scrollCards('left')"
                >
                  <i class="el-icon-arrow-left-fill" />
                </button>
              </div>
   ....card details html
</div>

Method Code snippet to show Paddles

showPaddle() {
  const secondRowEl = this.$el.querySelector('.second-row');
  const gridWidth = this.$el.querySelector('.grid').clientWidth;
  const scrollMax = gridWidth - secondRowEl.clientWidth;
  if (gridWidth > secondRowEl.clientWidth) {
    if (secondRowEl.scrollLeft > 0 && secondRowEl.scrollLeft < scrollMax) {
      this.showLeftPaddle = true;
      this.showRightPaddle = true;
    } else if (secondRowEl.scrollLeft >= scrollMax) {
      this.showLeftPaddle = true;
      this.showRightPaddle = false;
    } else if (secondRowEl.scrollLeft <= 0) {
      this.showLeftPaddle = false;
      this.showRightPaddle = true;
    }
  } else {
    this.showLeftPaddle = false;
    this.showRightPaddle = false;
  }
}

Css style

.second-row {
      margin: 0 auto;
      padding: 0 0 0 4px;
      overflow-y: hidden;
      background: var(--gray40);
      -ms-overflow-style: none; 
      &::-webkit-scrollbar {
        display: none;
      }
      scrollbar-width: none;
      &:hover,
      &:focus {
        .paddles {
          display: block;
        }
      }

      .paddles {
        display: none;

        .paddle {
          border: none;
          padding: 0;
          height: 100px;
          width: 50px;
          cursor: pointer;
          position: fixed;
          margin-top: 33vh;
          z-index: 10;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
          text-align: center;
          font-size: 2.5em;
          color: #333333;
          background-color: rgba(204, 204, 204, 0.5);

          &:hover {
            background-color: rgba(204, 204, 204, 0.65);
          }

          &:focus {
            background-color: rgba(204, 204, 204, 0.8);
          }

          border-radius: 50px;
        }

        .left-paddle {
          &.paddle {
            > i {
              margin-left: -10px;
              font-size: 44px;
              position: relative;
              top: 2px;
            }

            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
          }
        }

        .right-paddle {
          right: 0;

          &.paddle {
            > i {
              margin-right: -10px;
              font-size: 44px;
              position: relative;
              top: 2px;
            }

            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
          }
        }
      }

      .hidden {
        display: none;
      }

      .grid {
        display: block;
        &.product-grid {
          position: relative;
          height: calc(100vh - 194px);
          margin-bottom: 0;

          .item {
            position: absolute;
            width: rem(442);
            padding-right: rem(8);
            margin: 0;

            &.highlight {
              border: 1px solid #66afe9;
              border-radius: rem(4);
              outline: 0;
              box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
                0 0 2px rgba(102, 175, 233, 0.6);
              -moz-box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
                0 0 2px rgba(102, 175, 233, 0.6);
              -webkit-box-shadow: 0 1px 1px 4px rgba(102, 175, 233, 0.6),
                0 0 2px rgba(102, 175, 233, 0.6);
            }

            .app-card {
              .app-card__header {
                padding: 0.25rem 0.75rem;
                i {
                  position: relative;
                  top: rem(3);
                }
                .app-card__title {
                  &:first-child {
                    margin-left: 0;
                  }
                }
                .app-card__expand-icon {
                  margin-right: 0;
                  margin-top: 0.5rem;
                  height: 1rem;
                  right: 0.75rem;
                  i {
                    position: static;
                    color: var(--gray70);
                  }
                }
              }
            }
          }
        }
      }
    }

Can you help on this to disable hover effect for touch devices and show paddles on initial rendering?

Answer 1

Unfortunately no perfect solution to this problem yet exists, and is unlikely to exists in the future. “The Web is meant to be accessible to everyone, regardless of which browser or device they're using.” This implies all content should be visible, and serving different content based on device type is frowned upon by the W3C WAI

However there is a difference between changing the way content appears vs. completely hiding content from users if they're viewing on different devices. Your scenario falls into the first category, which in my opinion is fine.

Touchscreen devices - smartphone or tablet - cannot support hover events. Rendering the page differently depending on which user agent (device) your site is viewed in is possible, and you have a couple of options. However in general, using the user agent to detect the browser looks simple, but doing it well is, in fact, a very hard problem. Of the two options detailed below, if I had to, I'd go for option 2.

1. Detect the user agent using javascript. NOT recommended— read more about the issues here .

let hasTouchScreen = false;
if ("maxTouchPoints" in navigator) { 
    hasTouchScreen = navigator.maxTouchPoints > 0;
} else if ("msMaxTouchPoints" in navigator) {
    hasTouchScreen = navigator.msMaxTouchPoints > 0; 
} else {
    let mQ = window.matchMedia && matchMedia("(pointer:coarse)");
    if (mQ && mQ.media === "(pointer:coarse)") {
        hasTouchScreen = !!mQ.matches;
    } else if ('orientation' in window) {
        hasTouchScreen = true; // deprecated, but good fallback
    } else {
        // Only as a last resort, fall back to user agent sniffing
        var UA = navigator.userAgent;
        hasTouchScreen = (
            /\b(BlackBerry|webOS|iPhone|IEMobile)\b/i.test(UA) ||
            /\b(Android|Windows Phone|iPad|iPod)\b/i.test(UA)
        );
    }
}
if (hasTouchScreen) {
  // do some stuff on devices with smaller screens
}

2. Detect screen-size with javascript (CSS media queries are also an option, but you mention you've tried them already). NOT recommended. The iPad Pro 12 has a resolution comparable to a desktop devices, for example.

if (window.innerWidth < 768) {
  // do some stuff on devices with screens smaller than
  // 768px wide
  window.addEventListener("resize", function() {
    /*refresh screen size dependent things*/
  })
}