0

I deployed a website for a client today and for some reason, the text on top of the header photo is off. The inner text is supposed to be white with a 1px blue outline, but on safari, and safari only, the inner text changes to black. On non-phone screens (in safari and other common browsers) the text renders correctly. Using Chrome on the same phone screen, the text renders correctly. Can someone take a look at my code and see if I'm doing something wrong for this to happen?

@media screen and (max-width: 600px){
      .inner-text {
        font-family: "Arial Black";
        text-align: center;
        position: absolute;
        font-weight: 900;
        top: 50%;
        left: 25%;
        -webkit-text-stroke: 1px blue;
        transform: translate(-50%, -50%);
        color: #ffffff; 
      }
    }
<div class="photo-headliner">
  <div class="inner-text">
    <h1 style="font-size: 50px;">Superb Roofing </h1>
    <h3 style="font-size: 25px;">Give us a call! <br>(210)441-6377</h3>
  </div>
</div>

Below photo is what it should look like: Correctly rendered

Below photo is what is happening on safari phone screens:

enter image description here

MaxiGui
  • 6,190
  • 4
  • 16
  • 33
Michael Bade
  • 25
  • 6
  • I am on safari, and I see it white, do you know the version he has ? Mine is Version 13 – MaxiGui Aug 31 '20 at 18:43
  • You can provide a live url to try and see if there a difference – MaxiGui Aug 31 '20 at 18:50
  • 1
    I'm on 13 as well. What is so strange is that when I open the page through VSCode, the text renders correctly. This issue happens only on phones using Safari version 13. I've spent several hours trying to fix it, and I'm truly stumped. Also, thanks for the edit! – Michael Bade Aug 31 '20 at 18:50
  • Okay, sounds good. Here's the url: http://superbroofingllc.com/ – Michael Bade Aug 31 '20 at 18:51
  • On iPhone, there is indeed the written in black. I saw that by maintaining my finger on the number as if I would like to open, and then just canceling this opening. After canceling, the phone number is back to the normal white, so it might be a auto focus on iphone Safari. I also see that it took a very long time to load the website on phone with WIFI – MaxiGui Aug 31 '20 at 19:19
  • Yes, it did! Thank you! I added this to my header: How long did it take to load on your phone? – Michael Bade Aug 31 '20 at 19:45
  • 1
    Thank you for your help too!!! – Michael Bade Aug 31 '20 at 19:45
  • It is loaded on phone, already. Please accept the duplicate. – MaxiGui Aug 31 '20 at 19:50

0 Answers0