Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

QR scan area overflowing in Safari on iOS

See original GitHub issue

I’ve implemented the QR code reader in my Vue app and it looks as expected when I check it with Chrome Developer Tools mobile view (iPhone 6/7/8).

screenshot 2018-09-09 15 04 09

However, this is not replicated when I open the web app on my iPhone using Safari. The camera view overflows the rectangular box with white border:

photo-2018-09-09-15-06-25

The code for my scan page is:

<template>
  <div class="scan-content">
    <div class="scan-ready">
      <div class="title">Scan the QR code</div>
      <qrcode-reader @decode="onDecode" :paused="qrPaused"></qrcode-reader>
      <md-button class="md-raised" @click="cancelScan">Cancel</md-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QrScan',
  data: () => ({
    progressBar: false,
    decodedString: 'nothing received yet',
    qrPaused: false
  }),
  methods: {
    onDecode (decodedString) {
      this.decodedString = decodedString
      this.qrPaused = true
      alert(decodedString)
    },
    cancelScan () {
      this.$router.replace('/app')
    }
  }
}
</script>

<style scoped>
.scan-content {
  height: 100%;
  background-color: lightgrey;
}

.scan-loader svg {
  width: 50px;
  height: 50px;
}

.scan-ready {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
}

.scan-ready {
  text-align: center;
  font-size: 20px;
}

.scan-ready .title {
  padding: 20px 50px;
  text-align: center;
  font-size: 18px;
  background-color: white;
}
.qrcode-reader {
  max-width: 400px;
  margin: 20px 15px;
  border: 5px solid white;
}
</style>