I have a strange problem with Chrome rendering a simple menu written in css and html. When I check the website on localhost everything works well but on a web server there is a bug.
Here is a link for the test website http://slitest.me.pn/menu_bug/ (saving it locally removes the bug)
I only care about chrome here. I have discovered that problem is caused by
float: left;
in
.menu li span
But what is funny, in chrome page inspector I manually disabled and enabled this parameter and everything started working fine, but after refreshing the page it is wrong again... no idea what is happening.
Here's the results I'm getting (localhost is what I assume to be correct):
Try to use margin-left instead of float:left
Related
I have the following issue:
I have this under construction state website, https://endertainment.com, it was build with PHP and MySQL from scratch, like any other I did. The issue is when you access the website from Mobile Safari or Safari the website doesn't show all the elements must show. When you access from Android (Any Browser) or Windows or even in Linux the website shows any element well. I already run test in BrowserStack and CrossBrowserTesting... in both shows the same result; the web didn't show properly. I already remove every flexbox property and use inline-block instead. For example, this other website (https://tuticketazo.com) is under construction state too and use the same structure of https://endertainment.com.
I already made tests changing the server folder the domain points; upload a simple html page from scratch, without PHP ; use without SSL... I think already test everything but in iOS Safari, Mac OS Safari and even in Chrome in MacOS shows the elements but not in the right way.
You should set line-height of your heading titles.
#MainTitles h1 { line-height: 50px }
#LangSelect a { line-height: 20px; }
But the problem is not inside these 2 rules. I didn't determinate full code of CSS, I just check small fixes for places which I saw broken
I found the problem and resolve the Issue.
OS X have a rendering issue with some fonts.
I start my research searching a common pattern, I has this issue with 3 websites:
Adjusting the line-height didn't work properly.
Change the ul from inline-block to flexbox, didn't work
The issue is present in any browser in Mac OS (I test Chrome,
Firefox and Safari)
Continue researching an I found some documentation about the issue.
I found this article
OS X type rendering - text baseline is shifted upwards, effectively no-longer centered vertically within the line-height
I test in the 3 different websites have the issue and VOILA!
Everything works fine now.
I used in the 3 websites the same fonts (the common pattern):
Gotham Book
Gotham Black
I can confirm this two fonts evoke the rendering issue in Mac Os.
The problem is solved right now.
I'm using Bootstrap glyphicons. They are working nicely, but with Chrome browser, the glyphicons blink when the page loads
For example:
Open this link on Bootstrap:
http://getbootstrap.com/components/#glyphicons-glyphs
Once loaded, Press F5 or refresh.
You will see the glyphicons blink.
How can I fix it so they don't blink?
Here's a screenshot:
Note: This only happens in Chrome, not FF or IE.
Generally, this is a problem with having a flash of unstyled content (FOUC).
Specifically, this is what Paul Irish calls a flash of unstyled text (FOUT):
In Firefox, basically the text is in a default webfont until the custom font is ready
Webkit takes a very different approach, and very intentionally. They believe it’s better to keep the text invisible until the font is ready. This way, there is no moment where the text flashes into its newly upgraded self
In other words, this issue isn't so easily overcome.
You can attempt to minimize the impact by:
Using gzip to shrink the file so it downloads quicker
Using caching so the client can use an existing copy rather than grabbing a new one.
The heavy handed approach would be to wait to display the page to the user until everything was rendered, but I would strongly recommend against this. User are very impatient for initial load times but are considerably more forgiving when it comes to rendering additional content.
The glyphicons blink/flicker on page reloads, but the bigger problem for me (I'm using Bootstrap 3) is that the page flickers as elements resize around the glyphicons. Adding this to my CSS stopped the resizing for me:
.glyphicon {
width: 14px;
height: 14px;
}
Thanks to my source: https://www.garysieling.com/blog/preventing-icon-flicker-using-glyphicons
I had exactly the same problem but solved it by adding .woff and .woff2 as new MIME-types font/x-woff in IIS.
This stopped the glyph-icons from blinking immediately as Chrome now caches the font-file correctly.
To see if this may apply to you, open the debug-console in Chrome (F12) on the site it blinks and you will find an error related to the glyph-font-files where the browser interprets them as the wrong MIME type.
Running into an issue that has me pulling hair out!
I am buildling a site and started browser testing. The page displays properly (with the regular IE breaks) but for some reason, does not display the actual CSS in the IE8 dev tools. Site is locally hosted with MAMP and using VirtualBox to test with IE/PC.
I've added the IP to the hosts file in IE8.
I've fixed all validation errors
Even threw it up on a server to see if it was a local issue
Running HTML5 doctype so maybe thats the issue? But pulled it from HTML5 Boilerplate so I'm under the impression everything is good there?
Not really sure what the issue is and its driving me crazy.
Site is hosted here: www.enkshows-dev.com
p: enkshows-dev
w: enkshows-dev
Also - IE8 doesn't render the CSS file in the 'CSS' tab, but the page layout is correct.
Don't worry, folks. I figured it out.
Looks like IE8 gets hung up on the css link for the H&FJ cloud typography production fonts.
As soon as that's removed, all works swell.
I have an element with the class .ui-menu .ui-menu that has the style of margin-left:25px;. I have removed this, so that it is margin-left: 0px;. However, when I refresh the page, it's still displaying this style, and the 'inspect element' window tells me that according to the css file it's reading .ui-menu .ui-menu still has a rule set for margin-left: 25px;.
I have tried using F5, Shift + F5, Shift + Ctrl + F5… I've manually cleared all cache, shut the computer down and restarted it. I'm about to uninstall Firefox completely and reinstall it to see if THAT even works. I've also tried renaming the CSS file, and re-linking to it with its new name… and then Firefox stops reading the CSS file entirely, because it's not updating the headers or footers to see that it's been changed so everything goes unstyled!
I don't have this issue in GC, Opera, Safari, not even in IE. Am I doing something wrong?
As to your questions:
I'm using Firefox instead of other browsers because I can't control what browser people who visit my site are using. As far as website design goes, this is a pretty basic understanding.
I've run the site through validation here: http://jigsaw.w3.org/css-validator/validator?uri=http%3A%2F%2Fthesciencefacility.icyboards.net%2Findex.php&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en
Most of the issues here are just cross-browser stuff, plus some embarrassing color issues. if you can find something here I can't, please mention it!
The site is not self-hosted. It's a forum service through IcyBoards, if you're at all familiar with it.
I'm working on an existing Rails application using Turbolinks.
I have a plans page with upgrade/downgrade functionality. When this page is visited from another page and a button is clicked to upgrade nothing happens, although when I refresh my browser it seems to work fine and posts the form.
The strange thing is that other buttons work fine with Turbolinks installed and it only seems to happen in Chrome. Firefox, Opera and Safari it works fine.
Has anyone encountered this problem before? I've searched through Google all morning but can't seem to find a resolution.
It seems like it's a problem with Google Chrome. I've fixed it by putting the attribute data-no-turbolink in the HTML on the link that goes to the page in question.
Now, when I go to the page via clicking on the link it doesn't use Turbolinks and makes a full refresh of the page.
To just target Chrome (as it seems to work in other browsers) you could use this piece of js:
if ($.browser.webkit) {
$("your-css-selector").attr('data-no-turbolink', true);
}
Could be seen as a bit of a hack, but it works.