title: Vue.js rendering issues with safari
body: <p>I have a portfolio website written using Vue and Laravel that renders out project thumbnails with v-for.
  This works completely fine on every browser apart from on Safari, there's a weird issue where the images will not show up at all unless the user resizes the browser window. 
  Heres the relevent code:</p>
  
  <pre><code>  &lt;div class="project-list"&gt;
          &lt;img v-show="!loaded" class="loading" src="../assets/contrast_load.gif" alt="loading..."&gt;
            &lt;div class="project-container" v-for="project in shownProjects.slice().reverse()" v-bind:key="project.id"&gt;
              &lt;figure class="project" @mouseover="gColor1 = project.color1; gColor2 = project.color2" @click="goToPage(project.id)" :style="`--overlay-color: ${project.color1};`"&gt;
                &lt;img :src="`${base}/storage/app/${project.thumb_img}`" :alt="project.name" /&gt;
                &lt;figcaption&gt;
                  &lt;h3&gt;{{ project.name }} &lt;span v-bind:style="{color: project.color1}"&gt;{{ project.description }}&lt;/span&gt;&lt;/h3&gt;
                &lt;/figcaption&gt;
              &lt;/figure&gt;
            &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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 &lt; vm.projects.length; i++) {
            if(vm.projects[i].tags.toLowerCase().search(vm.search.toLowerCase()) &gt; -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);
      },
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    .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 &gt; img,
    .project.hover &gt; 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;
      }
    }
  &lt;/style&gt;
  </code></pre>
  
  <p>and you can visit the page here: <a href="https://www.redsquirrelstudio.co.uk/#/portfolio" rel="nofollow noreferrer">https://www.redsquirrelstudio.co.uk/#/portfolio</a></p>
  
  <p>Any help would be greatly appreciated this has been a real headache.</p>