stop cursor from blinking on Overleaf - overleaf

I've been using Overleaf for four years. The cursor didn't use to blink three months ago. But today when I used Overleaf again, the cursor started blinking, which is very distracting for me. Moreover, I notice that the height of the cursor is smaller that it used to be. I googled how to access the cursor setting but didn't find anything useful.
Any insights would be greatly appreciated. Thank you. The attached is a screenshot of the cursor.
cursor

See if this helps, it's a Linux/firefox solution but the same principle would apply to other devices and browsers (monospace).
https://superuser.com/questions/1431132/overleaf-text-input-cursor-offset-on-arch-liunux

Related

White background when selecting suggested option in angular material input

Hello fellow developers!
I noticed this issue a long time ago and still don't even know how to google it.
The problem is the following:
When typing in angular input I have options popping up - all of them are the values that I ever entered to this or any other input, upon hover on one of the suggested items the background of the text becomes white, same happens if I choose one of the options.
But if I type the same value manually (or any other original value), then everything is perfectly fine:
Not sure if the problem is with Angular Material here. I am using MacBook for development, if it helps.
I will be happy if anyone can shine the light on this issue!
Cheers!

Animating SVG Path's stroke-dashoffset causes extreme drop in performance in Safari

I have a simple stroke-dashoffset CSS animation on my site, it's what is causing those dashed lines to move in the gif below:
This run's fine on Chrome/Firefox on my Macbook. But when I open it on Safari there's an extreme drop in performance. Every now and then it will start running smooth for a second or so, and then go right back to being choppy and slow. It's somewhat unpredictable.
I made a codepen that uses the same SVG paths and animation - And the problem persists.
I noticed when I make the Safari window smaller, it smooths out very well. Which makes me think it has something to do with how many pixels it's drawing and how often it's drawing them.
I've been looking up this issue with every search phrase I can think of and can't find anything that would help me understand what's happening. I was wondering if anyone had any advice on a workaround for this? Or just some clarification on what is happening here. Thanks.

Can't click on links hovering above video in safari

So I have a website with a menu-bar at the top with a sub menu that appears when you hover.
Under the menu, I have a large video playing embedded with the HTML5 <video> tag. However, on safari on ipad, i can not click the links that are hovering above the video, despite me having given them an appropriate z-index.
Can anyone help me out here? :(
edit: here's a jsfiddle: http://jsfiddle.net/7t6c00vn/
The issue seems only to happen on ipad.
The video takes precedence over any other material. Check Putting Video on Canvas on developer.apple.com.
So far as I can see the only solution seems to be to hide the video. Check
A Solution for Overlaid Elements on Video
I would also love to know if there is any other / better solution to this because I'm also in the process of building something using HTML5 and video that needs interaction.
It turns out that it's a sort-of-bug that was fixed with an update for the system. I don't think this problem has a definite answer yet, but I will choose FrankHe's answer as it actually provides some real suggestions and material for the problem.
But yea, things seem to work after the iOS update, so to any end users experiencing overlay problems with Video elements, update your systems! :)
Unfortunately, this also means I no longer have an un-updated device to test on.

Webkit Wobble - Sprite Sequence Bug?

This is something which has been annoying me for a couple days now.
I have a spritesheet used for buttons, playing the sequence on hover/click/whatever is no problem and looks great (the image in the link is just a quick example of course). Let's say I also want that sequence to reverse on mouseout, in Firefox this plays fine. In Chrome and Safari however the image seems to 'wobble' when it plays a sequence in
reverse.
http://jsfiddle.net/SzcQn/
This example shows a quick mock up of the problem. Try mousing over the image and it will play the sequence, when you mouse out it will reverse it. In firefox this looks fine but in webkit browsers it wobbles.
The image sequence is not at fault, the code is identical for webkit and moz... I can only conclude it is a bug.
Obviously I could simply include an additional 15, in this case, frames which have the sequence reversed... but that seems a needless waste of resources.
Does anyone know of a way to resolve this issue? I have tried it with multiple sprite sheets, multiple ways of activating the animation and different webkit animation settings... the problem only occurs when it is set to play through the images from right to left, ie. in reverse.
Looks like a bug. Probably. I'd file it/search to see if anyone else has reported it.

intermittent background-load bug in Chrome

Heres the story:
When I load the following page in chrome (verified across 2 computers), it seems like about 1 in 5 refreshes results in display errors.
Often, the background image only loads halfway down the the screen, and the bottom half displays only white (which is weird b/c I have the background set to black under the image.)
There is at least one other incorrect way that it displays which is a less exaggerated version of the other problem.
Since it only happens sometimes and only on chrome (as far as I can tell) and only on one page of the site, I have ignored this issue for more pressing concerns; but I develop in chrome so I am constantly reminded of it.
I have absolutely no clue why this kind of thing would happen and even less of a clue how to remedy it. Any insight anyone might have would be greatly appreciated.
The page
Try to load your page in Safari. If you see same problem, means you missed a bracket or semi column in your css. Webkit browsers seem to handle css errors this way. I had same problem happening to me once. My css file was over 2800 lines. It took some time to find the error. Best.
See the following link:
Issue with background color and Google Chrome
This fixed the problem for me...

Resources