Why does the highlight focus on "ort" instead of "fort"?
It appears this occurs when there are two f's. When I substitute f with other letters, like d, it shows correctly. Could this be a bug in Chrome?
Chrome version is chrome83. add: It seems to be related to the font.
https://i.stack.imgur.com/c8RNn.png
body {
font-size: 30px;
}
.highlight-font {
color: green;
}<div>
<span>ef</span><span class="highlight-font">fort</span>
</div>It appears to be a bug specific to Chromium-based browsers (I encountered the same issue on Opera 69). The functionality seems to be unaffected on Firefox and other browsers.
If you require an immediate fix, you can utilize an invisible character like ‌. I have personally used this workaround with success.
<!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>I am attempting to create a toggle effect for my div using this jQuery script: $(document).ready(function(){ $("button").click(function(){ $("div").animate({left:'250px'}; }, function() { $("div").animate({left:'0px'}; }, }); ...
Take a look at this JSfiddle. I am trying to make the "Push this!" div move when the menu resizes/expands on hover. Is it possible to achieve this effect using only CSS? <div id="nav"> <ul> <li><a href=""><span>01</spa ...
Currently, I am immersed in a Django project that involves incorporating custom checkbox forms. However, I ran into an issue where two identical code chunks are used with different forms. The problem arises when the label in the first sample is clickable ( ...
Help Needed: Issue with Changing Default Button Color in Next.JS Web Application. The button text color appears as grey on Desktop Google Chrome, but shows up as blue on Mobile Chrome browser. I want to unify the color to be grey on both platforms. Custo ...
I am working on a website project and encountering an issue with a bootstrap toast. The toast currently appears in the top right corner, but I would like it to display above the carousel without affecting the layout. Instead, when the toast appears, it shi ...
How can I modify the code to prompt the user for their location only when they click on a specific button, and then show all markers on the map? This jsfiddle illustrates the current issues: Google map loads markers from a database, and the user is asked b ...
I've been playing around with bootstrap and AngularJS. I placed nav-tabs inside a modal-window and have it open when clicking on a link. However, I want the appropriate tab to open directly upon click. For example, if I click on "travel", I want the t ...
I want to create an effect where hovering over the .hoverarea class will toggle the visibility of .sociallink1, .sociallink2, and so on, with a drover effect. However, my code isn't working as expected. Additionally, an extra margin is automatically ...
I was faced with a coding dilemma that I couldn't quite figure out. The title may not give much away, but the issue lies within this code snippet: https://jsfiddle.net/bnh3487n/ div { width: 100%; } #wrapper { width: 500px; height: 500px; ...
I am currently working on an HTML page where I have implemented a CSS style overlay lightbox effect using CSS and jQuery. If you want to take a look at the code, click here One issue I am facing is that when I resize the window height so the right-hand s ...
Header with logo I'm trying to align the menu items like Home, etc with the logo, but it seems like the logo is taking up too much space above the menu headers and I'm not sure how to reduce it. I've already attempted using margin-left or r ...
I am facing an issue with displaying images in a wide Datatables header. The design is based on the Zurb Foundation 5.5.3 framework. Does anyone know why this CSS code is being strikethrough in the image below? (you can view it at which uses Zurb Founda ...
Issue: I am facing a problem where I receive double keypresses from one key event when the event updates content in two separate windows. (Please keep in mind that I am not an expert in this field and appreciate your understanding.) I am attempting to use ...
Currently, I am in the process of creating a unique scroll box to address my specific needs. The standard html <select> box is not cutting it for me as I require two columns displayed, which I couldn't achieve with a regular <select>. Howe ...
I am struggling to achieve the desired display using Bootstrap 4 form-control feedback styling. The goal is to include an icon inside the input field along with an error message. My current setup includes Angular 5.2.9, Bootstrap 4, and Fontawesome icons. ...
I am in need of assistance with passing a value from a database. I have successfully achieved this using drop-down boxes, selecting the option and then posting it with a submit button to populate tables in Display.php. However, my current task involves an ...
I am facing a simple issue here, but my knowledge of jQuery is limited and I'm struggling to find a solution. I have been trying to implement a rating function using the code from this link: Everything seems to be working fine, but I noticed that on ...
I'm new to AJAX and JavaScript and unsure of how to get it working. Here is the website: When you click on portfolio images, the details load via AJAX. I want to create a slideshow for projects with multiple full-sized images. However, due to the co ...
I have a specific goal in mind: I want to create two buttons (left and right) with interactive cursors. The left button should initially have a cursor of "not-allowed" on hover, indicating that it cannot be clicked at the beginning. When the right button ...
While working on my website, I added an interesting effect to a circle. Currently, the circle opens automatically when hovering the mouse over it and closes when the mouse moves away. However, I would like to modify it so that it automatically opens and cl ...