Safari 的 Vue.js 渲染问题

Question

我有一个使用 Vue 和 Laravel 编写的投资组合网站，它使用 v-for 呈现项目缩略图。 这在除 Safari 之外的所有浏览器上都可以正常工作，但存在一个奇怪的问题，即除非用户调整浏览器窗口的大小，否则图像根本不会显示。 相关代码如下：

  <div class="project-list">
        <img v-show="!loaded" class="loading" src="../assets/contrast_load.gif" alt="loading...">
          <div class="project-container" v-for="project in shownProjects.slice().reverse()" v-bind:key="project.id">
            <figure class="project" @mouseover="gColor1 = project.color1; gColor2 = project.color2" @click="goToPage(project.id)" :style="`--overlay-color: ${project.color1};`">
              <img :src="`${base}/storage/app/${project.thumb_img}`" :alt="project.name" />
              <figcaption>
                <h3>{{ project.name }} <span v-bind:style="{color: project.color1}">{{ project.description }}</span></h3>
              </figcaption>
            </figure>
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import LogoSVG from '../components/LogoSVG.vue';
import config from '../config';
import axios from 'axios';
export default {
  name: 'Portfolio',
  data(){
    return{
      search: '',
      projects: [],
      shownProjects: [],
      loaded: false,
      gColor1: '#752323',
      gColor2: '#e04747',
      base: config.BASE_URL,
    }
  },
  components:{
    LogoSVG,
  },
  watch:{
    search(){
      const vm = this;
      vm.shownProjects = [];
      if (vm.search == '') {
        vm.shownProjects = vm.projects;
      }
      else {
        for (var i = 0; i < vm.projects.length; i++) {
          if(vm.projects[i].tags.toLowerCase().search(vm.search.toLowerCase()) > -1){
            vm.shownProjects.push(vm.projects[i]);
          }
        }
      }
    },
  },
  methods:{
  getProjects(){
    const vm = this;
    vm.loaded = false;
    axios.get(`${config.APP_URL}/api/projects`)
    .then(function (response) {
        vm.projects = response.data;
        vm.shownProjects = response.data;
        window.onload = function() {
          vm.loaded = true;
        };
      });
    },
    goToPage(r){
      this.$router.push('project/' + r);
    },
  }
}
</script>

<style scoped>
  .loading{
    position: absolute;
    width: 50px;
    height: 50px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }


  .project-list{
    width: 90%;
    height: 70%;
    position: absolute;
    display: flex;
    display: -webkit-flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    left: 50%;
    top: 65%;
    transform: translate(-50%, -50%);
    align-content: flex-start;
    overflow-y: scroll;
    overflow-x: hidden;
  }

  .project-container{
    width: 33%;
    height: 30vh;
  }

  .project {
    background-color: #2A2A2A;
    color: #FFF;
    font-family: 'Roboto', sans-serif;
    font-size: 18px;
    margin: 8px;
    max-width: 100%;
    min-width: 230px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 100%;
    height: 100%;
    cursor: pointer;
  }

  .project * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.45s ease;
    transition: all 0.45s ease;
    cursor: pointer;
  }

  .project:after {
    background-color: var(--overlay-color);
    height: 150%;
    bottom: -145%;
    content: '';
    left: 0;
    right: 0;
    position: absolute;
    -webkit-transition: all 0.2s linear;
    transition: all 0.4s linear;
    cursor: pointer;
  }

  .project img {
    vertical-align: top;
    backface-visibility: hidden;
    max-height: 100%;
    object-fit: cover;
  }

  .project figcaption {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 10%;
    right: 10%;
    align-items: center;
    z-index: 1;
    display: flex;
    width: 80%;
    flex-direction: column;
    justify-content: center;
    line-height: 1.1em;
    opacity: 0;
    -webkit-transition-delay: 0s;
    transition-delay: 0s;
  }

  .project h3 {
    font-size: 1em;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
  }

  .project h3 span {
    display: block;
    font-weight: 700;
  }

  .project a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
  }

  .project:hover > img,
  .project.hover > img {
    opacity: 0.1;
  }

  .project:hover:after,
  .project.hover:after {
    bottom: 95%;
  }

  .project:hover figcaption,
  .project.hover figcaption {
    opacity: 1;
    -webkit-transition-delay: 0.3s;
    transition-delay: 0.3s;
  }

  .project-fade-leave-active,
  .project-fade-enter-active {
    transition: 0.4s all;
  }
  .project-fade-enter,
  .project-fade-leave-to  {
    opacity: 0;
  }

  @-webkit-keyframes fadeDown {
    0%   {
      top: 4vh;
      opacity: 0;
    }
    100%{
      top: 5vh;
      opacity: 1;
    }
  }

  @-webkit-keyframes fade {
    0%   {
      opacity: 0;
    }
    100%{
      opacity: 1;
    }
  }
</style>

您可以在此处访问该页面：https://www.redsquirrelstudio.co.uk/#/portfolio

任何帮助将不胜感激，这真是令人头疼。

Answer 1

发现问题。显然 safari 对 Vue 中的数据变化做出反应并不是最好的。我添加了一个元素，当其余数据加载时会发生变化，这会触发其他所有内容的更新。

很奇怪。