Problem with Linear Gradient in Safari

Hey guys, i’m having problems with a linear gradient not showing up on safari (desktop). it’s showing fine on chrome though:

you can see it at climate-tech dot net

the CSS i’m using is:

#rt-top-surround { background-color: #F1F1F1; background-image: linear-gradient(to bottom, #FFFFFF, #DDDDDD); background-repeat: repeat-x; border-bottom: 1px solid #FFFFFF; box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.298); color: #6E6E6E; text-shadow: 0px 2px 3px #FFFFFF; }

in Safari when i inspect the element, the “background-image” line has a warning icon by it but doesn’t tell me what’s going on with it.

any ideas?

What version of safari and what O/S are you using, please?

Mac has 9.0.3
Win7 has 5.1.7

it’s happening on both.

1 Like

What does the HTML look like that the CSS styles? and is any of the surrounding HTML/CSS relevent to the issue?

Could you post the code that demonstrates the issue in a “working page” so we can test exactly what you have written.

Not that I can tell. It’s strange because other browsers don’t have an issue.

The html:

<header id="rt-top-surround">
						<div id="rt-header">
			<div class="rt-container">
				<div class="rt-grid-5 rt-alpha">
            <div class="rt-block logo-block">
            <a href="/" id="rt-logo"></a>
        </div>
        
</div>
<div class="rt-grid-7 rt-omega">
    	<div class="rt-block menu-block">
		<div style="margin: 0px; position: static; overflow: hidden; height: 0px; display: none;"><div class="gf-menu-device-container" style="margin: 0px; overflow: hidden;"><select><option value="/"> Home</option><option value="javascript:void(0);"> Services</option><option value="/services/furnace-repair.html">- Furnace Repair</option><option value="/services/air-conditioning.html">- Air Conditioning</option><option value="/services/water-heaters.html">- Water Heaters</option><option value="/services/boilers.html">- Boilers</option><option value="/services/indoor-air-quality.html">- Indoor Air Quality</option><option value="javascript:void(0);"> Maintenance/Tips</option><option value="/maintenance-tips/furnaces-preventative-maintenance.html">- Preventative Maintenance</option><option value="/maintenance-tips/troubleshoot-a-furnace.html">- Troubleshoot A Furnace</option><option value="/promotions.html"> Promotions</option><option value="/contact.html"> Contact</option></select></div></div>
<ul class="gf-menu l1 " style="display: inherit;">
                    <li class="item101 active last">

            <a class="item" href="/">

                                Home                            </a>


                    </li>
                            <li class="item115 parent">

            <a class="item" href="javascript:void(0);">

                                Services                                <span class="border-fixer"></span>
                            </a>


            
                                    <div class="dropdown columns-1 " style="width:180px;">
                                                <div class="column col1" style="width:180px;">
                            <ul class="l2">
                                                                                                                    <li class="item104">

            <a class="item" href="/services/furnace-repair.html">

                                Furnace Repair                            </a>


                    </li>
                                                                                                                                                                <li class="item116">

            <a class="item" href="/services/air-conditioning.html">

                                Air Conditioning                            </a>


                    </li>
                                                                                                                                                                <li class="item102">

            <a class="item" href="/services/water-heaters.html">

                                Water Heaters                            </a>


                    </li>
                                                                                                                                                                <li class="item127">

            <a class="item" href="/services/boilers.html">

                                Boilers                            </a>


                    </li>
                                                                                                                                                                <li class="item128">

            <a class="item" href="/services/indoor-air-quality.html">

                                Indoor Air Quality                            </a>


                    </li>
                                                                                                        </ul>
                        </div>
                                            </div>

                                    </li>
                            <li class="item103 parent">

            <a class="item" href="javascript:void(0);">

                                Maintenance/Tips                                <span class="border-fixer"></span>
                            </a>


            
                                    <div class="dropdown columns-1 " style="width:180px;">
                                                <div class="column col1" style="width:180px;">
                            <ul class="l2">
                                                                                                                    <li class="item129">

            <a class="item" href="/maintenance-tips/furnaces-preventative-maintenance.html">

                                Preventative Maintenance                            </a>


                    </li>
                                                                                                                                                                <li class="item130">

            <a class="item" href="/maintenance-tips/troubleshoot-a-furnace.html">

                                Troubleshoot A Furnace                            </a>


                    </li>
                                                                                                        </ul>
                        </div>
                                            </div>

                                    </li>
                            <li class="item110">

            <a class="item" href="/promotions.html">

                                Promotions                            </a>


                    </li>
                            <li class="item148">

            <a class="item" href="/contact.html">

                                Contact                            </a>


                    </li>
            </ul>		<div class="clear"></div>
	</div>
	
</div>
				<div class="clear"></div>
			</div>
		</div>
			</header>

I do not have Safari on my PC, so we will need a Safari person to pick up this topic, please.

Have you tried

background: linear-gradient(to bottom, #FFFFFF, #DDDDDD);

without the background-repeat?

It doesn’t seem to make a difference with that.

You can check it out here: climate-tech.net

On my mac version of safari (9.x) it seems fine. but on the windows one (5.x). The windows one is having the issue consistently

Didn’t Apple abandon Safari on windows about four or five years ago because no one was using it?

It probably isn’t worth worrying about long abandoned browsers not working properly - there are probably more people still using Netscape 4 rather than Safari 5 on Windows computers.

That sounds like an improvement. Safari on Windows is no longer supported and it’s 4 years out of date. Do you need to support it?

Did you try the -webkit prefix?

1 Like

I agree with both of you about the old versions, but in this case the client brought it to my attention :frowning:

I’ll see if i can get him to come into the office since he’s local and show me what he’s seeing.

Thanks everyone!

This will be what he’s seeing…

Yeah I see that too, but getting him in here with his equipment will allow me to explain the problems with out of date versions and update his software. Hopefully that’ll take care of it.

1 Like

There probably is no more recent version of Safari because Apple abandoned it - so you’ll need to decide which browser to swap him to.

1 Like

You can add an image gradient before the css gradient as a fall-back for old browsers if you need to support them. But Safari for Windows is a dead browser, one that no one should waste time trying to cater for.
The client needs to get a modern browser, Chrome, Firefox, Edge, anything will be better than that.

Safari for Windows is an old browser, if you want to get rid of it then get a modern browser like Chrome, Firefox, Edge, anything will be better than that.

As others have said safari on the PC is dead and should not be used because apart from the fact that is its a very old and dead browser and will support little css3 it will also be a security issue because it is not maintained. Users should remove it from their system as it has no viable use these days.

Notwithstanding the above the problem with your code is that safari 5.1 on the PC doesn’t understand the new linear gradient syntax (because it wasn’t around then) and you would need to use the prefixed version.

background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #DDDDDD 100%);

The above is tested and working in safari PC (I have it installed an an old machine that I don’t use anymore).

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.