Shouldn't text inside a web component be possible to select? - google-chrome

I just tested a new web component in Chrome and Firefox. To my surprise the text in the web component was not possible to select in Chrome. It is possible to select the text in Firefox.
And I was not able to change that in Chrome (using user-select:text).
This looks like a bug in Chrome to me, but maybe I am misunderstanding something?

Related

Chakra UI app is not being rendered properly on Chrome

I'm following a youtube tutorial on a MERN stack project. It uses Chakra UI for the frontend. But I've noticed a weird issue. The app looks perfectly fine on Firefox, but not on Chrome. I have attached the images to show the difference/problem.
While trying to solve the problem, I noticed that the app looks fine in incognito mode on chrome also. I changed the chrome profile to a profile that I don't use often, and the app looks fine on that as well. So, it seems like the problem is with the chrome profile that I use generally. I have also tried disabling the extensions that I have, but it's still not rendering properly. I also tried removing the browser cache, but no success. I don't want to remove the entire data from my profile. Can you please explain what is causing this issue and what might solve it?
The app looks like this on Chrome:
The app looks like this on Firefox:
I'm guessing you're using colorScheme for your buttons and that Chrome is on dark mode and Firebox is on light mode. Colors schemes have different colors for each theme. For more control on which colors are used you can try:
Styling single part components
Style props like below
<Button color="white" bg="blue">Log In</Button>

How can I use Flag Emojis in vs code and render in browser Like Chrome or Firefox in Windows 10?

When I am trying to use Flag Emojis in my vs code windows 10, it's not showing in vs code or any browser. What can I do?
๐Ÿ‡บ๐Ÿ‡ธ
๐Ÿ‡น๐Ÿ‡ท
But it's showing plain text like us and tr.
After Updating my mozilla firefox the icons are showing normally. And for Chrome Browser I used an extension for icon. Now itโ€™s working fine in both Firefox and Chrome.

How to prevent your web page to display in IE?

I am working on my first project and it looks OK in Chrome and Opera. But for some reason the "Signature Chef dish" section, looks off on Firefox. I suspect it has something to do with the grid I implemented there?
How can I fix this?
Also I want to disable view in the IE and it looks like a complete mess. Why?
URL: http://www.chefmarwanslim.com
The code:
https://github.com/Igor2122/marwan-3-0.git
In order to 'block' IE, just check what browser is being used and than change the page accordingly, in the case of IE you just display "Please upgrade to a decent browser". You could also add a link to firefox or chrome in that message if you want to. In order to detect what browser is used, please look at How to detect Safari, Chrome, IE, Firefox and Opera browser?.
Feedback for the site
The site looks nice, but the SIGNATURE CHEF DISH section isn't consistent. It would be better if the tweets and 'normal' pictures where displayed the same way or if you'd only use one of the two.

Parts of font in Google ReCaptcha not visible

I've successfully implemented Googles ReCaptcha to my webpage.
Sometimes it ocurrs, that the user hast to select a few images, e.g. "Select all Images displaying Trains". Now the problem is, that for me (Chrome 47.0.2526.111 m (64-bit), it works in Firefox) doesnt display the "Trains". Heres a screenshot of what I mean:
So anyone who doesnt know how to use the developer tools of chrome to find out what exactly he has to select will be lost here.
I use a custom font on my webpage, If that causes the problem, but It shouldn't, because the font is by google too, it wouldn't be very wise of google to let their own fonts mess up their ReCaptcha.
Solution anyone?

Text flow out of divs in chrome, but not on all chrome users?

I got a really strange problem, and after so much tries and research I can't get out of it.
I have a website, but SOME (just 5% of visitors) people with the SAME version of chrome, see the text flowing out of divs and text overlapping. It's very strange because I tested the website on all chrome browsers using browser testers, without any problem. And in internet explorer or firefox this problem never happens...
A page is located here
And here are some screenshots of what SOME people see (maybe you won't see this in chrome)
click here
Maybe it is because of the font face I am using? Or maybe some bad coded CSS?
Please help me out of this!
Thanks a lot!
I see you use .svg font. Recently I was hunting some Chrome font rendering bugs and saw this:
http://code.google.com/p/chromium/issues/detail?id=95102
This seem very similar to issues you are having. You could try to serve some other font type to Chrome and if this would fix that.
If you don't want or can't serve some other font type to Chrome, the only thing you can do is wait until Chrome version 24 is out to all users which should be soon (I can't find any announcement)
I tested it in
Chrome 23.0.1271.97 m
Chrome 26.0.1371.0 canary
Chromium 25.0.1334.0 (169326)
# Windows 7 x64 and your page seems fine for me.