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>
Related
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
I have been having this problem for a couple of weeks now. I have this code
div{
margin: 0;
padding: 0;
border: 5px outset black;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>
<p>testing</p>
</div>
</body>
</html>
and it is doing this:
I have looked at tutorials, searched on Stack Overflow, and even when I run it in the code snippet, it works. What am I doing wrong!?!?
Edit: I also wanted to add this image to show you that it works perfectly fine in the code snippet.
Try opening it with a different browser.
I'm relatively new to Front End development, and have been trying to improve my core CSS skills.
I've come across a quirk between Edge (Chromium) and Chrome which does not make much sense to me.
I've attached two images of the same example index.html page opened in both Edge and Chrome.
You can see that in Chrome the text fits fine, but in Edge the text is cut in half! Does Edge do something different with the top margins?
Here is my attached HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./assets/css/style.css" type="text/css">
<title>Hello World</title>
</head>
<body>
<header>Hello, World!</header>
</body>
</html>
And the css:
html, body {
margin: 0;
padding: 0;
}
body {
background-color: #FFFFFF;
width: 100vw;
}
header {
background-color: rgb(115, 165, 216);
}
header {
width: 100vw;
height: 60px;
}
Thanks for your help! :)
I am trying to force a page break on to the printed version of my page. I am doing this by styling sections that I want to break into a new page. The problem I am having is that when I print an empty page is inserted between the elements. So the page break is working but adding an extra blank page between.
For example the below code should print two pages but it actually prints 4 in total (the two I want and two blank pages).
here is the full html code of the page , including css below;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title>DEMO</title>
<style type="text/css">
/* JUST IMPORTS , RESTS & MINIMAL DEFAULTS */
/* CSS reset */
* {
padding: 0;
margin: 0;
}
.container-flex-column {
display: flex;
flex-direction: column;
}
.page-width-mobi {
min-width: 1072px;
max-width: 1072px;
}
.new-page {
page-break-before: always;
box-sizing: border-box;
border-bottom: solid lightgray 20px;
}
.page-size-mobi {
min-height: 1505px;
max-height: 1505px;
min-width: 1072px;
max-width: 1072px;
}
</style>
</head>
<body>
<main class="container-flex-column page-width-mobi">
<section class="new-page page-size-mobi">
<h1>Page 1</h1>
</section>
<section class="new-page page-size-mobi">
<h1>Page 2</h1>
</section>
</main>
</body>
</html>
The problem I was having was that I was printing the document with an old version of safari. Safari did not consistently work with the break-before command. I was able to produce the desired outcome printing in an up to date version of chrome
The break commands and the #page css commands are new functionality and not widely supported
This has me stumped. This works fine in browsers (tested Chrome, Firefox, and Safari), but doesn't work in Chrome emulator, Chrome mobile, or Firefox mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<meta title="viewport" content="width=device-width, initial-scale=1.0">
<style>
div {
width: 50%;
float: left;
}
#media screen and (max-width: 500px) {
div {
width: 100%;
}
}
</style>
</head>
<body>
<div>Left</div>
<div>Right</div>
</body>
</html>
My original problem was more complex, but even boiling it down to the simplest form it's not working. Tried the above with different combinations such as display: inline-block; instead of float: left;, different viewport meta tags, adding only screen to the media query, other tags than plain divs, etc.
My original problem surfaced when doing work with Web Components + ShadowDOM, but it doesn't seem to be related to those. Made sure to bust all my caches while testing.
Am I going nuts?
Oh wow I'm dumb. Had a typo in the meta tag. Should be name instead of title:
<meta name="viewport" content="width=device-width, initial-scale=1.0">