The website I'm working on has issues with how the text is displayed in Google Chrome. I added text-rendering:geometricprecision to make it look better, but apparently it caused some text rendering bug. See this and this video. Any ideas on what might be wrong?
Adding -webkit-backface-visibility: hidden solved the issue.
Related
In a website I am developing, the background image is disappearing in Chrome. It is working fine in Edge and Firefox. I tried it in Another laptop to assure the problem is with Chrome and same in other laptop too. On inspecting, I found that for some unknown reason, Chrome automatically adds a property background-image: none; directly to the element.
See the faulty code here
This overwrites the property and div and makes background none. On disabling this property in inspect tool, the background images appears but refreshing page brings back the problem.
Well, here i have suggestions for you:
Check if any adblocker is working in your chrome or not. If yes, then please remove it, and try again.
Do not run the code at Chrome's incognito
Add the style elements at the head section of your HTML file.
Please let me know if it works or not. Don't hesitate to ask further questions.
I have found the root cause. It was due to an extension. It was not the Ad-Blocker in my case. Removing that extension has solved my problem
I'm using rgba colors, but after switching to HEX the problem still persists. I never had this issue a few weeks ago, and just noticed it. All opacities on rgba colors are set to 1 (100%), so they should appear. I assume it's a new chrome bug?
The left screenshot is Safari where it works and the right is Chrome.
safari vs chrome link
Same to me. I found a fix! Aparently there is a bug with webkit with the backface of a div element. This code will help
-webkit-backface-visibility: hidden;
You can found more info in w3schools.com -> here
Chrome appears to have some rendering bugs. Especially after GPU Driver Updates or Chrome Updates. A friend of mine had them for months.
You could try tuo update your drivers but theres no guarantee it helps.
Same happens to me. I tried to download Chrome beta. The weird rectangles do not appear there but the background color still does not act as it is supposed to. You can take a look at my page - the blue background color magically changes itself as soon as the whole landing page disappears.
I am currently having an issue in chrome with a webpage I am working on. When the page loads, there is an odd space after an inline element.
Usually this would be caused by a margin, or some padding. What is peculiar about this issue though is that it isn't. If I disable a CSS rule then re-enable it, it fixes the issue.
The issue doesn't happen in Firefox, so as far as I know it is chrome specific.
Any help or suggestions would be greatly appreciated.
Screenshot of said issue: http://imgur.com/pIjeXnV,UEPWRiB#0
I've solved this issue by having javascript change the css after a short delay and change it back. This emulates the solution that I mentioned viewing through using the inspector.
Since this is more of a work around than a solution, if anyone has any more information about the issue, feel free to comment.
Thanks.
Unfortunately I can't reproduce this in a JSFiddle or otherwise, when I do it simply works properly. From there I still was not able to narrow it down to figure out what is causing it. Here is the link to the development site:
http://dev.fusion-inc.net
This bug is only visible in Chrome, I am using the latest version, and the problem still appeared on the previous version (I just updated this morning).
Watch the links in the content of the home page carefully, when the image slider transitions, you will see a change in the text of the links. It's almost as if the anti-aliasing changes somehow and causes the text to become just a smidge thinner. You may need to zoom in to see it well.
Any idea what's causing this? I'm completely stumped, the only thing I can figure is something in the rendering of the animation of the slider is tweaking some anti-aliasing or something causing the fonts to move a bit. Even the youtube and linked in images in the footer have the same problem.
#content * {-webkit-backface-visibility: hidden;}
The above fixed it thanks to someone in Chat.
Similar problems should reference this link: Prevent flicker on webkit-transition of webkit-transform
Got a quick query about some text on my slider on a website I'm making. It's been puzzling me because it only happens in Chrome, when the slide loads it will output the Title from wordpress. As the page loads it renders the font as how it should then a split second later it gets more font weight it seems.
I'm wondering what the issue is?
Just check any of the text on the slides in Chrome. Would be great to know why!
Thanks.
edit* added an image.
known issue in Chrome fixed in latest development builds.
It is a temporary workaround you can also try.
After a little bit of looking around I found that if I add
-webkit-font-smoothing: antialiased;
To my headings it seems to fix my issue. I will mark this as resolved. Thanks everyone.