Fluid Cursor Movement in the Atom Text Editor

I encountered an issue where adding a smooth caret animation in the atom editor caused the background to start blinking uncontrollably.

Below is the code snippet I used to add the animation in my style.less file:

atom-text-editor .cursor {
    transition: all 80ms;
}

Feel free to check out this gif to see what was happening: https://i.sstatic.net/AIXMK.gif

Does anyone know of any CSS that could be used to prevent this issue?

Update:

It turns out that this issue was specific to Ubuntu 18.04. Refer to the answer for a workaround solution.

csslessatom-editor

Answer №1

For a quick solution, navigate to Settings -> Core -> Enable sRGB color profile

It appears to be a rendering problem rather than a CSS issue. The suggested adjustment should eliminate the rectangle borders and possibly stop the flickering as well.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Transforming a triangular shape into a square using Plane Geometry in THREE.js

I have an animation created with triangles in the link below. Is there a way to convert these triangular areas into squares? The animation currently has a line running through the middle when using "PlaneGeometry". Removing this line would turn the triangl ...

javascriptjquerycssthree.js

What are some effective strategies for preventing CSS duplication?

What is the best way to prevent repeating CSS code like this: div#logo div:nth-child(1) div { width: 30%; height: 30%; background-color: white; } div#logo div:nth-child(3) div { width: 30%; height: 30%; background-color: white; ...

htmlcss

What is the reason behind the body element's background styling impacting the entire screen?

Why does styling the background of the body element affect the entire screen instead of just the body itself? For example, consider this CSS rule: body { width: 700px; height:200px; border: 5px dotted red; background-color: blue; } While the ...

htmlcssbackground

Tips for making content vanish or remain concealed behind a see-through header during page scrolling

I made a JavaScript fiddle http://jsfiddle.net/claireC/8SUmn/ showcasing a fixed transparent header. As I scroll, the text scrolls up behind it. How can I make the text disappear or be hidden behind the transparent div when scrolling? Edit: I should also ...

htmlcss

Ensure consistency in the heights of div elements, even when the images contained within have varying heights

I created a bootstrap webpage with a row of DIVs, each containing an image. As I resize the browser window, I noticed that the height of the first two DIVs remains consistent, but the third div's height varies because the image is only 50 pixels high. ...

htmlcss

When implementing flex-grow 1 on a flex box, the remaining space is not being filled as expected

I am struggling to make the green div fill the remaining space of a flex box container. My goal is to have the top row (blue) adjust its height based on content, and then have the row below (green) take up the rest of the space. However, it seems like the ...

htmlcssflexbox

What is the best way to align the bottom of an anchor element with the bottom of an SVG element when positioning them together

I am working on a test website where I am trying to create an interesting visual layout. My goal is to place an SVG image in the background, with an anchor element and other elements laid out above it. The challenge I am facing is aligning the bottom of th ...

htmlcsssvganchor

Is it possible to use JQuery to trigger a click event on text inside

Trying to implement a JQuery method that triggers when the code below is clicked: <div class="content_sub_list"> <img src="/imgs/close-icon.jpg" class="exit_sub_list"/> hello </div> The current JQuery code in use: $(document).r ...

javascriptjquerycsshtml

Customizing the sizes of HTML components (h1, h2, h3, etc.) with Tailwindcss for both desktop and mobile platforms

Currently, I am working on a project using Tailwind CSS and Next.js. I want to customize the font size of h1 element from 40px to 46px for desktop screens (1440px) and then adjust it to 30px for mobile web (375px). I attempted to add a new property in the ...

cssnext.jstailwind-css

Allocating the remaining container space to a lone flex item

Imagine a scenario where I have a flex container with children that completely fill the container. .container { display: flex; width: 150px; } .item { flex: 1 1 50px; border: 1px solid blue; } <div class="container"> <div class="item ...

htmlcsslayoutflexbox

The left column is stationary vertically, but can be scrolled horizontally

On a webpage, there are three columns: left, middle, and right. Only the left column is set to position:fixed, while the others are normal. When vertically scrolling, the left column should remain fixed while the other two scroll. However, when the brows ...

htmlcsslayoutcss-position

Top method for expanding a SASS class using an inner selector (sub-class)

When it comes to styling HTML to display messages, here's what I have: <div className="message"> <div className="message_label"> A message </div> </div> To style these messages, I am using the SCSS class bel ...

htmlcssreactjssass

CSS - Creating a stylish break line for link boxes

Struggling with creating a box that includes linked text and a line break. However, the issue arises when the line breaks, causing the box to also break. After trying multiple options, I still can't seem to find a solution. Check out my attempt her ...

htmlcssline-breaks

Sketch a variety of numerical values in a circular formation

I was working on a number circle using the below fiddle, but I need it to always start from 0 at the top. How can I achieve this? Additionally, I would like to connect the numbers from the inner circle border to the number with a dotted line. How can I dr ...

javascriptjqueryhtmlcss

Space between flex content and border increases on hover and focus effects

My code can be found at this link: https://jsfiddle.net/walshgiarrusso/dmp4c5f3/5/ Code Snippet in HTML <body onload="resize(); resizeEnd();"> <div style="margin: 0% 13.85%; width 72.3%; border-bottom:1px solid gray;"><spanstyle="visibilit ...

javascripthtmlcss

Attempting to call a nested div class in JavaScript, but experiencing issues with the updated code when implemented in

Seeking assistance. In the process of creating a nested div inside body > div > div . You can find more information in this Stack Overflow thread. Check out my JSFiddle demo here: https://jsfiddle.net/41w8gjec/6/. You can also view the nested div ...

javascripthtmlcsswordpresswordpress-theming

Looking for assistance with CSS selectors for the following structure

I am currently working on locating the anchor element "a" that is nested inside a table with the class name table.ic-table-creditReportProduct table tr. I have attempted to find it, but my attempts have been unsuccessful so far. Any suggestions on where th ...

cssseleniumcss-selectorsspockgeb

What is the best way to use CSS to hyphenate a capitalized word?

I have a single word that needs to be hyphenated, but the lang=en hyphenate: auto property does not work on capitalized words. To address this, I utilized the slice function in JavaScript to split the word in half so that the second half, which requires h ...

htmlcssreactjsfirefoxcss-hyphens

How to give a stylish touch to your :after element with a css

I have a unique bubble design that pops up when hovering. I'm trying to add a border around the bubble, but I'm facing difficulty adding a border to the pointer of the bubble. The arrow is created using the .bubble:after selector. You can check ...

htmlcsscss-position

Opting for a CSS framework instead of building custom CSS from scratch

In my quest to achieve the best CSS practices on my website, I initially relied on my own custom CSS. However, I then discovered the option of using CSS frameworks like Bootstrap or Foundation Zurb. While I believed that using a framework alone would meet ...

csstwitter-bootstrapzurb-foundationcss-frameworkscascade-framework