Nuxt•7mo 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

FurnaxeOP•7mo ago

!Kakashi•7mo 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 ?

FurnaxeOP•7mo 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•7mo 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

Did you find this page helpful?