Safari 的 Vue.js 渲染问题

Posted 2023-02-22

【中文标题】Safari 的 Vue.js 渲染问题

【英文标题】：Vue.js rendering issues with safari

【发布时间】：2020-08-31 05:41:01

【问题描述】：

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

  <div class="project-list">
        <img v-show="!loaded" class="loading" src="../assets/contrast_load.gif" >
          <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`" : />
              <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

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

【问题讨论】：

嘿红松鼠工作室！当然，您在这里有另一个帐户，并且必须知道您的代码有点太长，无法帮助您正确解决该问题。如果我是你，我会缩小我的代码范围，以帮助访问者找到兴趣和正确答案！快乐编码！干杯！

您好 Ardzii，感谢您的建议，这是我在这里发布的第一个问题，我会尽快将代码缩小到完全相关的内容。

【参考方案1】：

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

很奇怪。