Vuetify: [Bug Report] Unshowing image when used VImg components on Safari of iOS 12.1.x

[TanisukeGoro]

Environment

Vuetify Version: 2.1.1
Vue Version: 2.6.10
Browsers: Google Chrome, Safari
OS: iOS

Steps to reproduce

Using VImg components in the above environment

1. Create Vue project

npm install @vue/cli -g
vue create app-name

Vue CLI v3.12.0
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection)Babel, Linter
? Pick a linter / formatter config: Prettier
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM

2. Install Vuetify

vue add vuetify

3. modified HelloWorld.vue

<template>
  <v-container>
    <v-layout text-center wrap>
      <v-flex xs12>
        <v-img
          :src="require('../assets/logo.svg')"
          class="my-3"
          contain
          height="200"
        ></v-img>
      </v-flex>
      <v-flex xs12 >
            <v-img
            src="https://cdn.pixabay.com/photo/2019/10/04/23/12/italy-4526692_1280.jpg"
            max-height="400"
            max-width="600"
          />
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
}
</script>

4. show iOS Safari on iOS(12.1.x)

show Safari, mobile Chrome on iPhone

Expected Behavior

The image will be displayed.

Actual Behavior

The image is not displayed, and output error message as below.

Reproduction Link

https://codepen.io/tanisukegoro/pen/BaaQQZR [⚠️It is not helpful because it can only be reproduced on iOS. ]

Other comments

The following error is output to the console.

[Vue warn]: Error in directive intersect inserted hook: "ReferenceError: Can't find variable: IntersectionObserver"

ReferenceError: Can't find variable: IntersectionObserver

If you look at VImg, you can seeIntersectionObserver type variables in initmethod.
👇
vuetify/VImg.ts at 32483b3d1f27248e37e8dc152b8fdad63a17e44e · vuetifyjs/vuetify · GitHub

I guess it has somehow compatibility issues for Safari.

How to fix this issue ?

[johnleider]

Looks like an alert that was supposed to be on that page wasn't. You can find it here https://vuetifyjs.com/en/directives/intersect . I'll move this alert to the img page as well with the upcoming docs changes:

[daniandl]

@johnleider does this mean that v-img depends on v-lazyload and thus on this polyfill?

[johnleider]

It depends on v-intersect, so yes. I'll be correcting this.

[johnleider]

While I have not been able to reproduce this on BrowserStack, the current process is still lackluster. I'll release a hot patch today so we can get this in your hands asap.

[Vercadium]

After updating to 2.1.7, I still have the issue periodically. The results I'm getting from my BrowserStack tests are very confusing 🤔

• iPhone XS - iOS 12 - Safari = Broke
• iPhone XS - iOS 12 - Safari = Fixed (on 2nd attempt with another fresh device/browser)
• iPhone XS - iOS 12 - Chrome = Broke
• iPhone XS - iOS 12 - Chrome = Fixed (on 2nd attempt with another fresh device/browser)
• iPhone 8 - iOS 13 Beta - Chrome = Fixed
• iPhone 8 - iOS 13 Beta - Safari = Fixed
• iPhone 8 - iOS 12 - Chrome = Broke
• iPhone 8 - iOS 12 - Safari = Broke

I have a large document I need to finish writing for this week, so I don't have time to look into it further right now, but hopefully this will help at least a little. I'll try and investigate it more if it's still unresolved by the time I'm done.

Thank your time and effort so far! 🙂

[Vercadium]

Just to add to the above - the issue was also present in IE11 and _seemingly_ not fixed after 2.1.7

However, I incidentally had to reclone my repository and v-img is now working as expected. I can only assume there was some dependency caching going on from within my node_modules, perhaps due to cache-loader.

I guess I need to push for a build server in my current role! 😏

[GustavoEdny]

I am receiving the same error when I am try test with vue test utils, I am testing a promotions component (v-carousel) with v-img components. How I can test it?

Vuetify version: 2.1.0