White background when selecting suggested option in angular material input - css

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!

Related

Can you have circle shadows on hover with plain Tailwind CSS?

I recently started learning Tailwind CSS because based on some research about the job market, I felt like it would be a nice marketable skill for my area.
Anyway, I am currently making a website in which I am trying to restrict myself from writing any other CSS classes apart from the ones given to me by Tailwind (In order to familiarize myself with "Tailwind Solutions" to certain problems). However I am kind of running into a dead end with a specific "issue".
I have a couple of circle "buttons" (they are images to be precise, but they have an "onClick" action). Instead of letting the user stumble upon the existence of this button randomly, I wanted to add a hover effect to the button so that a shadow appears around the image when the pointer is hovered on top of the image.
I have only tried the straightforward hover: shadow-sm class but I kind of expected this not to work because this is labeled in the Tailwind Docs as a "box-shadow". However I couldn't find anything else that could be applied in my case.
Any help would be appreciated.
Thank you in advance.
I played around with positioning & created this shadow on hover.
Check out and keep me posted in the comments below.

CSS bugs in Safari browser

To begin with, I just started my first job as a junior front-end developer and got a task to fix bugs in the safari browser. (Chrome works well). 
Our web app is developed using TypeScript, React (with Material UI framework) and Webpack.
Unfortunately, I spent hours surfing the internet and trying to find a solution for these bugs, but I couldn’t. I feel these bugs come from Material UI, but I might be wrong. I hope someone can help me with that and thank you in advance! 

So the main problems I encountered in Safari were kind of CSS bugs.
 Take a look:
Chrome_View / Chrome_View_Wrapped
Safari_View / Safari_View_Wrapped (Bugs are marked)
As you can see the in Chrome everything looks okay, while in Safari some of the things get corrupted.
ToolBar items get wrapped even there is free space. You can take a look at html and CSS. For example, if I comment (margin: -16px;) last item gets to its place.
Blue drawer background is not displayed until you wrap it out. You can take a look at html and CSS. For example, if I comment (overflow-x: hidden;) it gets fixed.
Wrap button on click should transform its direction by 180 degrees.
Footer and Drawer do not display images.
If anyone is familiar with this kind of issues please share your experience.
P.s. It would be great to avoid putting everywhere prefixes manually.

Random CSS loading issues

I am having some really random issues on two of my sites at the moment.
The two sites in question are http://djstephenjarmuz.co.uk/ and http://subduce.com/
I can only explain the issues as intermitent, and they seem to be CSS related. Like the sylesheet isn't loading.
THE SYMPTOMS
After a full refresh (no-Cache) CTLR+F5 job.
Menu bars are not visible until elements are inspected (http://djstephenjarmuz.co.uk/)
Some text is not visible. Present but transparent on content pages (http://subduce.com/)
Menu bars do not load the text on until hovered over, which seems to trigger the loading (http://subduce.com/)
Hopefully some bright spark will be able to show me where this is coming from.
and then others will be able to solve there own similar issues.
Thanks

Weird bug in Chrome and Safari OS X 10.9, hover over link drops to next line, WPfolio Two

I should start by saying I'm no expert when it comes to code and web design. That said, I have recently upgraded to OS X 10.9 Mavericks. After updating I'm experiencing a weird bug, specifically on my website and others like it using the wordpress theme WPfolio Two. When you hover over a link, the link jumps and drops to the next line. As soon as you move your mouse away from the linked text the text link hops back up to the line it's supposed to be on. This only happens using Chrome or Safari, it does not seem to happen in Firefox. For an example hover over any link on on either of these two pages http://jasonirla.com/category/news/ or http://notlaura.com/wpfolio-two/read-me/ Thie bug does not seem to effect drop down navigation menus or some (but not all) links in sidebar widget menus.
The bug makes it practically impossible to click the jumping link. I'm not experienced enough to say if this is a browser bug, a OS X bug, a problem with the code in the wordpress them I'm using or what. I am comfortable editing and writing small additions to the theme code using a child theme CSS but in this instance I have no idea where to start or what I'm looking for (to fix). All I know is that this problem did not occur when I was still running 10.8 mountain lion on my mac.
If anyone has any experience with problem like the one I'm experiencing and could offer me some advice I'd really appreciate any help you can offer. I've been searching all over for a week now and haven't been able to find any answers and nothing I've tried seems to make a difference. Thank you for any help or advice you are able to offer.
Can't leave a comment, so I hope this will help you:
Check your font-style on this hover link, is it bold on hover?
Do you use another font-size on hover?
Do you use a iOS compatible font on hover? (using a font that only works on windows systems will be transformed on iOS devices and could cause this bug.
I was contacted by the designer of the WP theme (WPfolio Two), there's a style on 193 of the CSS "display:compact" which is the problem. I put block comments around that line /* display:compact */ and the bug is fixed. Thanks for the initial help #lickmycode – user1544398 just now edit

Google+ Games Buttons

I have no idea how to even start this question, but I was referred to Stack Overflow by a friend who basically told me that anything I need help with or to help others, I should come here. So I have a question for website designers and coders alike. (optional: have a google+ account for a visual aid)
If you go into Google+, you have all these cool features that seem advanced with code, but very basic in style. You hover over a button and it becomes animated like the in the games section. You have an image of the game in a div container I believe and it cycles through like its a gif or a timed sequence. At the bottom of the image, you see a small box from left to right, filled in with a different color, and has the name of the game on it. When you hover over said game a box begins to move from the bottom of the div to the top of the div completely covering up the image, but has more details in it. These details includes the description of the game and a button at the bottom that is a dark bluish that says play game, and when you hover over it, then it becomes a light blue like color.
Basically I want to create the same thing, but with different attributes. Same concept initially with the picture and the box with the name with a white border, but when you hover over it, then the background would be like a dark red with white text and a dark red button with a white border with the words view site and when you hover over it then it is like a light red.
I am making a portfolio website for my website designs and photoshop work. I think that this would be a great addition and I hope somebody or anyone can help me. I always give credit in my about pages if I didn't actually create something on my own.
Thank you for your time on reading this ridicuously long question, but I hope it relatively makes sense.
Your question makes sense and you can totally do it, personally I recommend learning HTML & CSS and creating a working demo - then hiring someone / finding someone to help build the features you want it to have. That way you have total control of the appearance, which I think is something that you're more interested about then coding the features ( you mention showcasing your design work ).
http://learn.shayhowe.com/html-css/terminology-syntax-intro/
Is a nice resource I saw today that might help you get started. In the future I think Stack Overflow is much more affective for specific questions related to specific issues, not something so broad as to code and design an entire web application.
Best of luck!

Resources