CODEWITHSUNDEEP
csstailwind-cssmobile-safaritext-decorations
Kyle
Kyle

Reputation: 49

Text-decoration-thickness and text-decoration-color

The various text-decoration properties work how I want them to in the Chrome browser on my laptop.

enter image description here

And not how I want them to in Safari on iOS (note the underline color isn't yellow and isn't thick like it is above).

enter image description here

Here's the code. I'm using Tailwind for my CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'red-primary': '#E43C39',
                        'red-secondary': '#E5403D',
                        'yellow-primary': '#F8B334'
                    },
                    fontFamily: {
                        'gibson': 'Gibson, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
                    }
                }
            }
        }
    </script>
</head>
<body>
    <header class="bg-[url('img/bg-placeholder.png')] bg-[#D8D8D8] h-[42rem] bg-center bg-no-repeat bg-cover pt-4 flex flex-col justify-between">
        <nav class="bg-white mx-4 px-3 h-14 rounded-md flex items-center justify-between shadow-custom z-10">
            <div class="w-32 h-12">
                <a href="index.html"><img class="h-full" src="img/logo.png" alt="logo"/></a>
            </div>
            <div id="hamburger-menu" class="h-7 w-9 relative group peer z-10">
                <div class="w-full h-1 absolute top-0 bg-yellow-primary transition-all duration-[600ms] ease-linear group-[.clicked]:-rotate-[315deg] group-[.clicked]:top-1/2 group-[.clicked]:-translate-y-1/2"></div>
                <div class="w-full h-1 absolute top-1/2 -translate-y-1/2 bg-red-primary transition-opacity duration-[800ms] ease-linear group-[.clicked]:opacity-0"></div>
                <div class="w-full h-1 absolute top-full -translate-y-1 bg-yellow-primary transition-all duration-[600ms] ease-linear group-[.clicked]:-rotate-[225deg] group-[.clicked]:top-1/2 group-[.clicked]:-translate-y-1/2"></div>
            </div>
            <div class="fixed w-3/4 top-0 right-0 bg-gray-100 h-screen transition-all duration-500 peer-[.clicked]:right-0">
                <ul class="w-3/4 font-gibson uppercase bold text-xl tracking-[.2rem] mt-20 mx-auto">
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="index.html">Home</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Who We Are</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Locations</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Job Openings</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">News & Updates</a></li>
                    <li class="mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary"><a href="#">Contact Us</a></li>
                </ul> 
            </div>
        </nav>
    </header>
</body>
</html>

My iPhone is running version 15.7.1 which as far as I understand means it's also running version 15 of Safari, which supports the decoration thickness and decoration color properties so I'm not sure why it shows up differently.

Any thoughts are appreciated.

Much love, Kyle

Upvotes: 1

Views: 656

Answers (1)

Kyle
Kyle

Reputation: 49

I ended up figuring it out on my own.

Instead of putting the class names in the li element, I put them in the a element.

Before:

<li class="mb-8 hover:text-red-1 hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-1"><a href="#">...</a></li>

After:

<li><a class="inline-block mb-8 hover:text-red-primary hover:underline hover:underline-offset-4 hover:decoration-8 hover:decoration-yellow-primary" href="#">...</a></li>

Upvotes: 0

Related Questions