I am trying to build a Chrome new tab extension. Now, when I load the built files in Chrome as an extension, the view looks zoomed out. Everything is the same, just zoomed out. I have no clue why this happens. I am using Svelte if that's gonna help.
Here are the visuals.
The usual and expected look.
The way it looks in Chrome.
Apparently, this happens because Chrome injects a default font-family and font-size to the body of the HTML. So, if you put your own configuration for the font in the body, then it will pick up that.
Related
I'm experiencing a weird text rendering issue on Chrome, where sometimes the text will not render at all until something triggers the browser to redraw.
Here's a screenshot of the issue
And this is what it's suppose to look like.
When it does fail, as soon as I open the dev tools, the font will render in correctly.
When the issue occurs with dev tools already open, changing the font-size will make the text appear.
Interestingly enough, when I set the font-size back, the text disappears again. EG:
$('p').css('font-size', 12); // Text appears
$('p').css('font-size', 13); // And its gone again.
When I remove Google fonts, the problem completely goes away. This is my font reference, I don't think there's anything wrong here?
<link href='https://fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
I've found a bug report for what looks like my issue here but it's been marked as fixed in Chrome 34+ and I'm running 49.
I cannot replicate this in any other browsers.
Would love to hear for anyone who might be able to point me in the right direction. If you need any more info let me know!
After a few hours of headache, I think I've found my problem.
Just under the screenshots I posted, there's an embedded Youtube video. Turns out, youtube use the same font we do (Roboto). When I removed the Youtube iframe or changed our app font to another Google font the problem went away. Which leads me to think there's some sort of conflict when downloading the fonts..? I'm really not sure.
I did end up getting Roboto working by including it via Javascript at the bottom of the page (instead of the link tag). Which kept the design guys happy :)
I'm a complete newbie here. I have been trying to learn to code a site with HTML/CSS/JAVASCRIPT.
I am using brackets to code the site. The site I am practicing with renders properly with all css and javascript.
However when I open the .html file into safari or firefox it does not display correctly. I think it is probably a css issue as the html elements are all there.
I have other sites that I have made before that don't have this issue and I can not see where I have gone wrong.
jsfiddle.net/fs4g55m2/1 I'm using fullpage.js as well. If you notice the navbar works perfectly well. It seems to be the css after it that is corrupted (once you get to the body tag).
If you think it is CSS (and you are linking to external CSS file) try look into the network tabs in your browser's developer console to see if it is properly linked. Check to see if requested css file throw back 404 status (not found) - usually highlighted in red.
In chrome or Firefox (not sure in safari) right click on your web page and click inspect element - then choose network tab.
Hope that helps
I'm working on a project in WordPress that is utilizing the Theme Customizer to assist other people working on the site with me. We're dynamically loading in a lot of content and options like Google Fonts, so the loading of the Customizer takes a few seconds to fully load (lingers on the admin page, then after a few seconds progresses to the /customize.php page).
Because of this, I wanted to add a simple "Customizer Loading" message that would pop up to let users know that something was happening. Everything works fine in Chrome and Firefox, but Safari and Internet Explorer (as far as I can tell from testing in Sauce) are giving me problems.
I'm using the following bit of JavaScript to add the loading message:
$('a[href="customize.php"]').click( function() {
$('head').prepend('<style type="text/css"></style>');
$('body').prepend('<div id="loading-message"></div>');
});
Inside the <style type="text/css"> block I simply included my styles and then <div class="loading-message"></div> is where I placed my content.
What is happening in Safari (and again, IE from what I can tell) is that when ... is clicked, the styles and content are getting added to the DOM (I can see them when I inspect the page), but they don't actually become visible, whereas in Chrome and Firefox they do.
If I use e.preventDefault() on the link, the loading message shows up just fine. Other events, like alert() and console.log() register fine, and the link will continue on through as expected. It's only the new content getting added to the DOM that doesn't become visible.
I can't figure out exactly what could be causing this and would greatly appreciate any help. I tried recreating the problem in JSFiddle, but I couldn't replicate the same result I'm getting in the WordPress Admin Panel (if you change out $('a[href="customize.php"]') for any other slug in the backend like "themes.php", it has the same result though).
Well i'm currently developping my Toolbar for Google Chrome as a Extension. The main principe is that i'm all the time injecting the toolbar as an iframe by using the Content Script.
But now i see a couple of bug with gmail, google map/search, pdf an maybe other that i've not yet see...
Let me explain, when i go on gmail, i don't see my toolbar at all...
When i open Google, it seems really normal :
But then when i start a search my toolbar seems to overide the top link (web, images, videos, maps,...) I can't click on them anymore...
Next problem is when i'm trying to go on google map or trying to open a PDF, it seems to give the same css to these web pages from my toolbar...
Google Maps :
PDF :
Hope i where clear enough, do not hesitate to ask me question if necessary ;)
Why don't you use absolute/fixed positioning and style attributes? Using style attributes would remove the issue of the possible spread of CSS.
To remove the toolbar from pdf, you could write something that removes the element when on pdf?
Well, i've find a good solution to resolve the problem with PDF and Google Map it was a problem on my CSS.
About the google Search now it works perfectly by setting the body webpage as a fixed page like NeXXeus tell me but there is still a problem.
Check this out :
EDIT : We don't really see, the argument select/deselect is top: 0px;
I have downloaded and installed IE8. I was playing around with the debugger, but I could not figure out how to load external javascript files. It displays the javascript from the main page, but I need to debug the script in the external files. I have googled various articles that show a screenshot of an IE8 debugger with a drop-down for selecting which script to debug, but my debugger does not feature this. Can anyone help me with this? Thanks.
Here is what I am seeing when I open up IE8. You just click the URL and it brings up a list of all scripts, which you can then click to load. If for some reason your browser is not showing the Script tab, maybe you should uninstall and reinstall it.
If the toolbar isn't wide enough (at least 800 at 92dpi) then the drop down arrow will be hidden (you can still click on the main area though). You can change that size by shrinking the size of the console on the right hand side their is a horizontal splitter bar between the script and console panes just click and drag on it.