Nuxt•3mo ago

Display problem

Hello, I have a problem with the rendering of the browser view when Safari is used, but it works on other browsers. Do you have any idea how I can fix this?

4 Replies

Furnaxe•3mo ago

!Kakashi•3mo ago

Safari is known for having some weird issues with style. Maybe in your case you are using a property not supported by safari ? Have you already tried playing with the style to find an alternative ?

Furnaxe•3mo ago

<div class="absolute inset-0 bg-white border border-gray-200 shadow-lg h-2/5 w-11/12 mx-auto mt-auto transform translate-y-2/3">
        <div class="px-4 py-3 sm:py-2 flex flex-col justify-between h-full">
          <div class="flex justify-between">
            <div class="sm:w-1/2 w-full">
              <h2 class="text-black text-base sm:text-2xl font-bold uppercase">{{ yacht.name }}</h2>
              <div class="bg-ocean-1000 h-1.5"></div>
            </div>
            <div class="font-extrabold text-xs sm:text-sm hidden sm:block">
              <h3 class="bg-cyan-300/50 text-cyan-800 px-3 py-0.5" v-if="yacht.status === 'new'">{{ $t('sales.new-listings') }}</h3>
              <h3 class="bg-yellow-300/50 text-yellow-800 px-3 py-0.5" v-if="yacht.status === 'price-change'">{{ $t('sales.price-change') }}</h3>
              <h3 class="bg-red-300/50 text-red-800 px-3 py-0.5" v-if="yacht.status === 'sold'">{{ yacht.type === "buy" ? $t('sales.sold') : $t('admin.rent.sold') }}</h3>
            </div>
          </div>
          <p class="text-sm sm:text-base font-medium"> :{{ yacht.refitted ? ` (refitted ${yacht.refitted})` : '' }}</span> | {{ yacht.shipyard }}</p>
          <div class="flex justify-between">
            <p class="font-bold text-base sm:text-xl" v-if="yacht.price">{{ yacht.price.toLocaleString('fr-FR') }} €</p>
            <p class="font-bold text-base sm:text-xl" v-else>{{ $t('sales.price-on-request') }}</p>
            <div class="font-extrabold text-xs sm:text-sm sm:hidden block">
              <h3 class="bg-cyan-300/50 text-cyan-800 px-3 py-0.5" v-if="yacht.status === 'new'">{{ $t('sales.new-listings') }}</h3>
              <h3 class="bg-yellow-300/50 text-yellow-800 px-3 py-0.5" v-if="yacht.status === 'price-change'">{{ $t('sales.price-change') }}</h3>
              <h3 class="bg-red-300/50 text-red-800 px-3 py-0.5" v-if="yacht.status === 'sold'">{{ $t('sales.sold') }}</h3>
            </div>
          </div>
        </div>
      </div>

<div class="absolute inset-0 bg-white border border-gray-200 shadow-lg h-2/5 w-11/12 mx-auto mt-auto transform translate-y-2/3">
        <div class="px-4 py-3 sm:py-2 flex flex-col justify-between h-full">
          <div class="flex justify-between">
            <div class="sm:w-1/2 w-full">
              <h2 class="text-black text-base sm:text-2xl font-bold uppercase">{{ yacht.name }}</h2>
              <div class="bg-ocean-1000 h-1.5"></div>
            </div>
            <div class="font-extrabold text-xs sm:text-sm hidden sm:block">
              <h3 class="bg-cyan-300/50 text-cyan-800 px-3 py-0.5" v-if="yacht.status === 'new'">{{ $t('sales.new-listings') }}</h3>
              <h3 class="bg-yellow-300/50 text-yellow-800 px-3 py-0.5" v-if="yacht.status === 'price-change'">{{ $t('sales.price-change') }}</h3>
              <h3 class="bg-red-300/50 text-red-800 px-3 py-0.5" v-if="yacht.status === 'sold'">{{ yacht.type === "buy" ? $t('sales.sold') : $t('admin.rent.sold') }}</h3>
            </div>
          </div>
          <p class="text-sm sm:text-base font-medium"> :{{ yacht.refitted ? ` (refitted ${yacht.refitted})` : '' }}</span> | {{ yacht.shipyard }}</p>
          <div class="flex justify-between">
            <p class="font-bold text-base sm:text-xl" v-if="yacht.price">{{ yacht.price.toLocaleString('fr-FR') }} €</p>
            <p class="font-bold text-base sm:text-xl" v-else>{{ $t('sales.price-on-request') }}</p>
            <div class="font-extrabold text-xs sm:text-sm sm:hidden block">
              <h3 class="bg-cyan-300/50 text-cyan-800 px-3 py-0.5" v-if="yacht.status === 'new'">{{ $t('sales.new-listings') }}</h3>
              <h3 class="bg-yellow-300/50 text-yellow-800 px-3 py-0.5" v-if="yacht.status === 'price-change'">{{ $t('sales.price-change') }}</h3>
              <h3 class="bg-red-300/50 text-red-800 px-3 py-0.5" v-if="yacht.status === 'sold'">{{ $t('sales.sold') }}</h3>
            </div>
          </div>
        </div>
      </div>

Here's where the problem is, I'd like to point out that on my site it's only here that it bugs. If a class seems weird or not compatible, I'd like you to tell me, but yes, I've already tried to play with the classes.

!Kakashi•3mo ago

Is it tailwind ? I thought your style was pure CSS. On the other hand, it will be hard to debug without a sandbox with a minimal reproduction of your case. But I know that in safari the div does not take the width of the content, especially when a flex is placed in an absolute element. Maybe you can try this to ensure that the div takes the full width

<div class="absolute inset-0 bg-white border border-gray-200 shadow-lg mx-auto mt-auto transform translate-y-2/3 w-full max-w-2xl h-full">

<div class="absolute inset-0 bg-white border border-gray-200 shadow-lg mx-auto mt-auto transform translate-y-2/3 w-full max-w-2xl h-full">

Otherwise, you can play with the style on https://play.tailwindcss.com. You have the generated CSS tab that could be very helpful in your case You can also use https://www.browserstack.com/ to emulate locally your site with different browsers to test them

Tailwind Play

An advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

BrowserStack

Most Reliable App & Cross Browser Testing Platform

Instant access to 3000+ browsers and real iOS and Android devices for cross browser testing. Ship apps and websites that work for everyone, every time. Get Free Trial.

Gaming

Programming

Display problem