Docs

[ZerotoOne]

hey there,
as the title says I got this problem with my navbar changing its color to red http://prntscr.com/co79p8 in the safari browser. on chrome it looks as it should.

my page is http://www.zerotoone.de

[ZerotoOne]

This reply has been marked as private.

[Rad]

Hi there,

Thanks for writing in.

What version of Safari you’re testing it on? I just checked it on my safari and I didn’t get the same view as your screenshot.

Thanks!

[ZerotoOne]

Version 10.0 (11602.1.50.0.10) on mac os x el capitan

[Rad]

Hi there,

I updated from 9.0 to 10.0 and yes, I’m able to see it now. Looks like it’s now implementing CSS even if they are invalid.

Example, this is invalid and ignored by all browser including Safari 9

background-color: #cc2e2e2e !important

It’s invalid because it has 8 hex character instead of just 6. But Safari 10 is now interpreting it differently. Example,

#cc2e2e 6 char is equal to red, adding 2e makes it transparent. Which makes it looks like pink. Looks like there will be the new standard in Safari 10.

Let’s fix it, please change this javascript (replacing background-color: #cc2e2e2e !important with valid RGBA)

    jQuery(document).ready(function($){
		$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
		var rev_height = $("#inici").height(); 
		$(window).scroll(function(){
			if ($(this).scrollTop() > rev_height) {
				$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: #cc2e2e2e !important');
			} else {
				$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');
			}
		});
	});  

to this

    jQuery(document).ready(function($){
	$('.x-navbar-fixed-top, .x-navbar').css("background-color", "transparent");
	var rev_height = $("#inici").height(); 
	$(window).scroll(function(){
		if ($(this).scrollTop() > rev_height) {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: rgba(46,46,46,0.8) !important');
		} else {
			$('.x-navbar, .x-navbar-fixed-top').attr('style','background-color: transparent !important');
		}
	});
});  

Hope this helps.

[ZerotoOne]

thank you a lot, thats it 🙂

[Thai]

You’re most welcome 🙂

[Author]

Posts