github repo with shortest code replicating problem
Basically i have a webpage that i have scaled down using the "viewport" meta tag.
<meta name="viewport" content="width=device-width, initial-scale=0.25">
The issue is that Firefox renders ALL my curved borders really blurry.
If an element has the following CSS applied while being viewed from a Bugzilla mobile browser, the resulting borders are really blurry/pixelated.
.element {
font-size: 40px;
text-align: center;
border: 4px solid black;
border-radius: 40px;
}
#media screen {
.element {
font-size: 4vw;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=0.25">
<title>Document</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="element">
Lorem Ipsum
</div>
</body>
</html>
Screenshot of webpage in Chrome (devtools Mobile browser):
Screenshot of webpage in Firefox (devtools Mobile browser):
From what i've found online it seems Firefox has a long history of scaling based rendering bugs but this is the first time ive seen issues with curved borders.
I think this is what that is related to background bleed and you may probably find its reason in this discussion https://bugzilla.mozilla.org/show_bug.cgi?id=921341
To answer your question which has already been asked in this thread div border radius problem (on firefox and opera)
I recommend you using these properties in your css regarding with the mentioned answer
-moz-background-clip
-webkit-background-clip
background-clip
Why is the highlight on "ort" instead of "fort"?
This seems to be the case when there are two f's. When I replace f with other letters, such as d, it displays normally. So maybe this is a bug in chrome?
chrome version is chrome83.
add: It seems to be related to the font.
body {
font-size: 30px;
}
.highlight-font {
color: green;
}
<div>
<span>ef</span><span class="highlight-font">fort</span>
</div>
I think it's Chromium based browsers bug (I see same bug, Opera 69). It works well on Firefox etc.
You can use some invisible character if you need some hotfix right now.
I've used and it works well.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
font-size: 30px;
}
.highlight-font {
color: green;
}
</style>
<body>
<div>
<span>ef</span><span class="highlight-font">fort</span>
</div>
</body>
</html>
Update: when I put the CSS internally, the problem goes away. I went in the dev tools on my chrome and compared what was happening when I reloaded the page. First image is with internal CSS, the second one is with external stylesheet, you can see different results for the background-color property:
Initial post: I have no idea why this is happening, here's a demonstration. Basically, the a takes some time to appear fully on the page.
The time it takes to 'fully' appear is the same duration specified in transition: background 5s; as in 5 seconds.
Here's the same code on another page where the effect is not observed, I also opened it in the same browser.
Here's my code in Visual Studio and in Chrome, the same behavior is observed in Edge but not in Firefox, in Firefox it just loads as it should and the :hover effects work properly. All 3 browsers are updated to their latest versions at the time of writing.
This only happens when I link to an external CSS stylesheet. When I copy the css to the html file the problem goes away!!!
CSS
a {
color: #fff;
border: none;
margin: 20px;
padding: 10px 20px;
display: inline-block;
font: bold 18px sans-serif;
background: #fd7c2a;
text-decoration: none;
-webkit-transition: background 5s; /* For Safari 3.0 to 6.0 */
transition: background 5s; /* For modern browsers */
}
a:hover {
background: #3cc16e;
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="description" content="" />
<!-- Specifies a description of the page. Search engines can pick up this description to show with the results of searches -->
<meta name="keywords" content="" />
<!-- Specifies a comma-separated list of keywords - relevant to the page -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css" />
<title></title>
</head>
<body>
<p>Hover on me</p>
</body>
</html>
I solved the issue, been going through google for answers. The solution is to add <script> </script> opening and closing tags in the html file separated by space. Apparently its a bug in the browsers mentioned before.
I've applied a css stylesheet to my view and it is not rendering when I view it. What's the problem here:
Edit: Works in Firefox 17, does not work in IE10 (something to do with my compatibility view? Not sure how to fix)
Master:
#using System.Web.Optimization
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>User_Master</title>
#Styles.Render("~/Content/Styles.css")
</head>
<body>
<header>
<p>header</p>
</header>
<nav>
#Html.Partial("~/Views/Shared/User_Nav.cshtml")
</nav>
<section>
#RenderBody()
</section>
</body>
</html>
Styles.css
header {
border-color: #0094ff;
border-bottom-right-radius:10px;
border-top:hidden;
border-left:hidden;
border-bottom:solid;
border-right:solid;
box-shadow:2px 2px;
}
Home
#{
ViewBag.Title = "Home";
Layout = "~/Views/Shared/User_Master.cshtml";
}
<h2>Home</h2>
There seem to be two parts to the problem.
CSS
One part of the problem is related to invalid CSS. For example, border-top is the shorthand declaration for a combination of style, width and colour:
border-top: [width style colour]
With this in mind, I would change your CSS as follows:
header
{
border: 2px solid #0094ff; /* width style colour */
border-bottom-right-radius: 10px;
border-top-style: hidden;
border-left-style: hidden;
box-shadow: 2px 2px 0px #000; /* x-offset y-offset blur colour */
}
IE / Compatibility Mode
If IE is coming through in compatibility mode, you're probably rendering using the IE8 (or older) engine. Unfortunately these do not understand HTML5, so things like the <header /> elements and border-radius and box-shadow CSS declarations are ignored. There are a couple of things you can try to fix this:
Add <meta http-equiv="x-ua-compatible" content="IE=edge,chrome=1" /> to your <head /> element. This will tell IE that you want to use the latest rendering engine. See this page for more information on this.
Include a JavaScript library like HTML5Shiv (which is also included in the excellent Modernizr library as well). This allows older versions of Internet Explorer to at least recognise HTML5 elements like <header />. Be aware that it won't add CSS3 support though; things like border-radius will not work, but at least you'll get normal borders.
Border Radius is not working in IE9. The following Attribute i used in my project. and also i add the .HTC file also
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
behavior: url(Styles/border-radius.htc);
.myclass {
border-style: solid;
border-width: 2px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
IE9 will use the default border-radius, so just make sure you include that in all your styles calling a border radius. Then your site will be ready for IE9.
-moz-border-radius is for Firefox, -webkit-border-radius is for Safari and Chrome.
Furthermore: don't forget to declare your IE coding is ie9:
<meta http-equiv="X-UA-Compatible" content="IE=9" />
Some lazy developers have <meta http-equiv="X-UA-Compatible" content="IE=7" />. If that tag exists, border-radius will never work in IE.
Use
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This is an old thread, but it did not help me. My solution was to add the HTML 5 doctype declaration to the page:
<!DOCTYPE html>
Other HTML doctype declarations may work too - my problem was I was generating the pages with no doctype declaration at all.
You need to put this in your HTML header
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Answer discovered here ie9 border radius
border-radius.htc broke normal border-radius in ie9, include border-radius.htc file in ie versions below 9 with conditional comments
in IE9 border-radius works without any behavior files.
This answer will also help with lower versions of ie, like ie6,7,8.
Using CSS Pie -> http://css3pie.com/
This will allow you to specify your border radius normally and then include the pie.htc script in your css. This magically make it work in IE6. Look at that!
This also works with other CSS3 properties like background gradients.
You can also try adding this to your head ->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Good luck!
border radius supported ie-7, ie-8, ie-9 via javascript
check this tutorial how to show border radius in ie
http://davidwalsh.name/css-rounded-corners
If you use at the same time border-radius with
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='######', endColorstr='######',GradientType=0 ),
just comment this filter.
No matter what you include or what you write border-radius doesn't work in ie9. Changing the browser mode or document mode is never a solution because that it is on the client side. So i am afraid my friend there is no plausible way to make border-radius work properly in ie9 unless you take the help of javascript.